zoukankan      html  css  js  c++  java
  • css基础回顾

    1、css选择器分类:

    id选择器,类选择器,通用选择器,

    包含(后代)选择器——加入空格,用于选择指定标签元素下的后辈元素。

    子选择器(大于符号)——用于指定标签元素的第一代子元素。

    伪类选择器——允许给html中不存在的标签(标签的某种状态)设置样式,like:a:hover

    分组选择器——用逗号隔开,为多个标签设置同一个样式时。

    2、css的继承,层叠,特殊性

    继承:设置给某一标签的样式会被继承到该标签元素的子元素

    特殊性:浏览器根据权值来判断使用哪种css样式,权值高就使用哪种css样式。标签的权值为1,类选择符的权值为10,id选择器的权值为100

    层叠:如果html文件中对同一个元素有多个样式的存在,且有相同权值的情况下,会根据样式的前后顺序来决定处于最后面的css样式会被使用。

    3、!important的使用

    p{color:red!important;}

    为最高权值。  浏览器默认的样式<网页制作者的样式<用户自己设置的样式<!important的权值

    4、html标签元素分类

    块状元素:div,p,table,h1...h6,ul,form    ——block   ——特点:每个块状元素都是霸占一行;高,宽,行高,顶,底边距都可设置;不设置的情况下宽度是它父容器的100%

    内联元素:a,span,br,label   ——inline    ——特点:和其他元素都在一行上;高,宽等不可设置

    内联块状元素:input, img    ——inline-block   ——特点:和其他元素都在一行上;高,宽,行高等可以设置

    5、css盒子模型的宽度和高度

    css中定义的宽和高指的是填充以里的内容宽度。一个元素的实际宽度(盒子的宽度),需要加上他的左边距,右边距,左边框,右边框,左填充,右填充

    6、css布局模型:流动模型,层模型,浮动模型

    重点回顾下层模型:

    层模型一般在局部布局的时候使用,主要三种:绝对定位,相对定位,固定定位

    绝对定位:将元素从文档流中拖出来,然后使用left,right,top,bottom属性相对于其最接近的一个具有定位属性的父包含块(abolute和relative的结合使用)进行绝对定位。如果不存在这样的包含块,则相对于body元素,即浏览器窗口。

    相对定位:注意一点:就是偏移前的位置保留不动。也就是说虽然在显示结果上来说是偏移了,但实际上的之前的位置,浏览器是给你保存下来,如果该元素后有其他的元素,那么其他元素的显示结果还是按照偏移前的位置,也就是原样保持不动。

    固定定位:固定定位的相对移动坐标是视图本身,不会随着滚动条滚动而变化,始终位于浏览器窗口内试图的某个位置,不会受文档流动影响。

  • 相关阅读:
    Maven
    Mybatis
    WinDbg的安装、配置和功能(转发)
    gRPC —— gRPC 基础: C#(待续)
    gRPC —— 通讯协议
    gRPC —— 安全认证
    gRPC —— 概念
    gRPC —— 概览
    grpc和protocol buffer介绍&实例(转载)
    protocol buffers ——git 源码
  • 原文地址:https://www.cnblogs.com/marryZheng/p/7011874.html
Copyright © 2011-2022 走看看