CSS-特性-继承-盒子模型

Hhan_
184 阅读12分钟

CSS的属性继承

CSS的某些属性，具有继承性：

  • 如果一个属性具备继承性，那么在该元素上设置后，它的后代元素都可以继承这个属性；
  • 当然，如果后代元素自己有这个属性，那么优先使用后代自己的（不管继承过来的属性权重有多高）；

如何知道一个属性是否具有继承性呢？

  • 常见的font-size、font-family、font-weight、line-height、color、text-align都具有继承性；一般和文本本身有关系的，都有继承性

image.png

image.png

Chrome浏览器也可以查看：

image.png

强制让子元素继承父元素中的某些属性：可以在子元素中书写：_想要继承的属性名（比如border）_：inherit

CSS属性的层叠

CSS的翻译就是：层叠样式表，什么是层叠呢？

  • 对于一个元素来说，相同一个属性，我们可以通过不同的选择器，对他进行多次设置；
  • 那么属性就会被一层层的覆盖上去；
  • 但是最终只会有一个生效！

image.png

最终只会生成一个颜色，橘色；因为没设置权重，那就跟着设置的先后顺序来；

  • 根据选择器的权重，权重大的生效，根据权重可以判断出优先级；
  • 先后顺序，权重相同时，后面设置的生效；

权重的比较

最高级的：在属性的后面加上一个!important，这个权限是最高的，永远不会被层叠掉；

.box{
   color:red !important; 
}

image.png

如果多个属性都有这个最高权重，那么就比较其他的；

内联样式：<div style="color:blue">权重是1000

id选择器：#main{...}权重是100

类选择器（包括伪类）：权重是10

元素选择器：div{...}：权重是1

通配选择器：*{...}：权重是0（最低级的）

选择器会根据不同，将权重值相加，最终得到权重总值。然后最终决定由哪个选择器中的属性生效；

HTML元素的类型

前面我们经常会提到div是块级元素，独占一行；span是行内级元素，会在同一行显示；

image.png

所以，为了区分哪些元素需要独占一行，哪些元素不需要独占一行，HTML将元素区分成了2大类：

  • 块级元素：独占父元素的一行；（p、div、h元素）
  • 行内级元素：多个行内级元素可以在父元素的同一行中显示。（img、span、a、strong、i）

内容元素一般都是行内级，因为一行中会显示多个内容。

通过CSS修改元素类型

事实上元素没有本质的区别：

  • div是块级元素，span是行内级元素；
    • div之所以是块级元素，因为浏览器默认设置了display属性
div{
    display:block;
}

我们当然也是可以手动来修改display，改变元素特性！

.box{
    //变成行内级元素
    display:inline;
}
span{
    //变成块级元素，独占一行
    display:block
}

<div class="box"></div>
<span></span>

根据CSS层叠，后设置的可以覆盖前面设置的；

CSS属性-display

display有4个常用值：

  • block：让元素显示为块级元素；
  • inline：让元素显示为行内级元素；
  • inline-block：让元素通知具备行内级、块级元素的特性（不独占一行，但是可以设置宽高）；
  • none：隐藏元素；

对于块级元素，width、height设置是有效的；

而【行内级元素】是不可以设置width、height，他的宽高是由内容决定的（就是包裹内容）

实际上上方是有点不准确的，比如img：表面是一个行内级元素，实际上他是个行内替换元素：

img: inline replaced：行内替换元素
行内替换元素：和其行内级元素在同一行显示、并且可以设置宽度和高度；

<img src = "...">

行内替换元素：和其行内级元素在同一行显示、并且可以设置宽度和高度；常见：input、img

image.png

补充

::after：默认是行内级元素，也就是说不能设置宽高；

编写HTML的注意事项

块级元素、inline-block元素：

  • 一般情况下，可以包含其他元素（内部可以再嵌套块级元素、行内级元素、inline-block元素）
  • 特殊情况：p元素不能包含其他块级元素（p元素不要包含div、h1这种）

行内级元素（比如a、span、strong）

  • 一般只能包含行内级元素

HTML元素隐藏的四种方法

display：none

display设置为none，元素不显示出来，并且也不占据位置，不占据任何空间（就跟不存在是一样的，本质是移除）

.box{
    display:none;
}

visibility：hidden

设置为hidden，虽然元素不可见，但是会占据元素应该占据的空间（本质就是隐藏了）；

默认为visible， 元素是可见的；

.box{
    visibility:hidden
}

rgba设置颜色

通过rgba设置颜色，将a的值设置为0

rgba的a设置是alpha值，可以设置透明度，不影响子元素，只对当前元素有效；

.box1{
    color:rgba(255,0,0,这里是alpha值0~1);
}

alpha为1就是不透明，0.5就是半透明，0是全透明，其中0.5的0可以省略不写，直接写成：rgba(255,0,0,.5)；

背景颜色透明度

background-color:transparent;
等价于：
background-color:rgba(0,0,0,0)

opacity设置透明度

设置整个元素的透明度，会影响所有的子元素；

.box{
    opacity:0
}

此时不仅div透明了，div下的子元素img也透明了
<div class = "box">
    <img...>
</div>

CSS属性-overflow

overflow用于控制内容溢出时的行为：

  • visible：溢出的内容照样可见；
  • hidden：溢出的内容直接被裁剪
  • scroll：移除的内容被裁剪，但是可以通过滚动机制来查看
    • 会一直显示滚动条区域，滚动条区域占用的空间，属于width、height
  • auto：自动根据内容是否溢出来决定是否提供滚动机制；

image.png

如果本身div是150、150的大小，那么滚轮会占据其中的10、10；

CSS样式不生效技巧

  • 选择器的优先级太低
  • 选择器没有选中对应的元素
  • CSS属性的使用形式不对
    • 元素不支持此CSS属性，比如span默认是不支持width和height的；
    • 浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性；
    • 被同类型的CSS属性覆盖，比如font覆盖font-size

所以我们要充分利用浏览器的开发工具进行调试、差错；

盒子模型

image.png

image.png

HTML中的每一个元素【都可以看做是一个盒子】，可以具备4个属性：

  • 内容（content）
    • 元素的内容width/height
  • 内边距（padding）
    • 元素和内容之间的间距（内容与边框的距离）
  • 边框（border）
    • 元素自己的边框
  • 外边距（margin）
    • 元素和其他元素之间的间距（盒子与盒子之间的距离）

image.png

image.png

image.png

内容-宽度和高度

设置内容，是通过高度和宽度设置的：

  • 宽度设置：width
  • 高度设置：height

再次提醒！对于【行内级非替换元素】，设置宽高是无效的；

另外我们还可以设置如下属性：

  • min-width：最小宽度，无论内容多少，宽度都大于等于min-width；
  • max-width：最大宽度，无论内容多少，宽度都小于等于max-width；
  • 移动端适配时，可以设置最大宽度和最小宽度；

块级元素：如果盒子的宽度和高度没有设置的话，默认就是auto，宽度是会占据父元素整行的，auto意味着让浏览器决定宽度大小；

行内级元素：不设置宽度，默认也是auto，它的宽度则会根据内容尺寸，来自动匹配；

text-align是让行内级元素居中，而块级元素居中需要通过：margin:0 auto

下面2个属性不常用：

  • min-height：最小高度，无论内容多少，高度都会大于等于min-height；
  • max-height：最大高度，无论内容多少，高度都会小于等于max-height；

内边距-padding

padding用来设置盒子属性的内边距，设置边框与内容之间的间距；

如果我们觉得内容和盒子贴的太紧了，就可以使用padding，如果使用行高line-height也是可以的，但是此时是整个盒子都那么高，我们想要的是文字距离盒子的高度；

padding有4个方向：（顺时针，即时钟方向）

  • padding-top：
  • padding-right：
  • padding-bottom：
  • padding-left：
.box{
    //给上右下左设置，是个缩写属性；
    padding:10px 20px 30px 40px;
}

padding单独编写的时候，是一个缩写属性：

  • padding-top、padding-right、padding-bottom、padding-left的简写属性；

padding也不是说一定要写4个值，才可以缩写的

image.png

4个值：时钟方向；
3个值：padding:10px 20px 30px;：缺少【左方向】，但是右边的值会赋给左方向的；
2个值：padding:10px 20px;:缺少【下和左】，那么【上和右】就会将值赋值给他俩；
1个值：上下左右全是一样的值；（更常见）

border

image.png

border相对于content、padding、margin会特殊点：

  • 边框具备宽度width；
  • 边框具备样式style；
  • 边框具备颜色color；

image.png

image.png

总缩写属性：border:10px solid red;顺序可以任意书写

border-radius

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

提示：该属性允许您为元素添加圆角边框！

div
{
    border:2px solid;
    border-radius:25px;
}

image.png

image.png

外边距-margin

margin用于设置盒子的外边距，通常用于元素和元素（盒子与盒子）之间的间距；

image.png

.box{
    margin-bottom:30px
}
.container{
    margin-top:30px;
}

<div class='box'>
    <div class="container">
    </div>
</div>

上下的margin的传递

margin-top的传递：

  • 如果【块级元素的顶部线】和【父元素的顶部线重叠】，那么这个块级元素的margin-top值会传递给父元素；
.box{
    width:300px;
    height:300px;
    background-color:red;
}

.container{
    width:100px;
    height:100px;
    background-color:yellow;
    
    
    margin-left:30px;
}

<div class="box">
    <div class="container"></div>
</div>

image.png

我在子元素中设置margin-left左右边距，只有子元素会生效；所以子元素的左右maring是不会影响到父元素的

.box{
    width:300px;
    height:300px;
    background-color:red;
}

.container{
    width:100px;
    height:100px;
    background-color:yellow;
    
    margin-top:30px;
}

<div class="box">
    <div class="container"></div>
</div>

image.png

在子元素中定义margin-top，按道理是子元素与父元素的距离，但是得到的结果却是父元素比body（当前父元素的父元素）的距离；因为子元素的margin-top传递给了父元素；

margin-bottom的传递：

  • 如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素；

如何防止出现传递的问题？

  • 给父元素设置为padding-top\padding-bottom（推荐）
  • 给父元素设置border:1px ...
  • 触发BFC，设置overflow：auto

建议：

  • margin一般用来设置兄弟元素之间的间距；
  • padding一般用来设置父子元素之间的间距；

上下margin的折叠

垂直方向上相邻的2个margin（margin-top、margin-bottom），有可能会合并为1个margin，这种现象叫做collapse(折叠)；

水平方向上的margin（margin-left、margin-right）永远不会collapse(折叠)；

折叠后的最终值计算规则：2个值进行比较，取较大的值；

如何防止margin collapse？

  • 只设置其中一个元素的margin
.box{
    width:300px;
    height:300px;
    background-color:red;
    
    margin-bottom:50px;
}

.container{
    width:100px;
    height:100px;
    background-color:yellow;
    
    margin-top:30px;
}

<div class="box"></div>

<div class="container"></div>

这个时候只会触发取值大的那个折叠，也就是bottom50；

image.png

因为CSS觉得这两个在不同地方设置的时候，效果是一样的，为什么你设置了其中一个还要设置另一个？她觉得你的是有问题的

块级元素水平居中问题

块级元素要想居中，可以display:inline-block变为行内块，然后就可以使用text-align:center

块级元素的width：等于：当前盒子的宽度+padding+border+margin，所以将margin左右设置为0，这样浏览器就会自动等分配：margin:0 auto;

.container{
    width:800px;
    height:150px;
}
.box{
    width:100px;
    height:100px;
    
    margin:0 auto;
}

<div class="container">
    <div class = "box"></div>
</div>

outline外轮廓

outline：表示元素的外轮廓

  • 不占用空间
  • 默认显示在border的外面

outline相关属性有：

  • outline-width：外轮廓的宽度
  • outline-style:取值跟border的样式一样，比如solid、dotted等；
  • outline-color：外轮廓的颜色
  • outline：outline-width、outline-style和outline-color的简写，和border用法 类似；
p{
    border:red solid thin;
    outline:#00ff00 dotted thick;
}

常用于：去除a元素、input元素的focus轮廓效果(选中或者tab键的时候，就会显示出轮廓)；

a{
    display:inline-block;
    outline:none;
}

//实际上上方的a就可以了，因为a:focus是a的一个伪类（子类）
a:focus{
    outline:none;
}

image.png

box-shadow

image.png

行内非替换元素的注意事项

以下属性对【行内非替换元素】不起作用：width、height、margin-top、margin-bottom

以下属性对【行内非替换元素】的效果比较特殊：padding-top、padding-bottom、上下方的border（也不占据空间）；

.content{
    background-color:red
    //内容不生效，除非display：inline-block
    width:300px;
    height:300px;
    
    //内边距，按道理文字距离盒子（背景色）会有很大一段距离
    //但是看起来padding-top没有变化，但是实际上他是有值的，只是没有占据空间
    padding:30px;
}

<span class="content">
    我是span内容，哈哈
</span>

image.png

box-sizing

我们之前设置的width和height，实际上都是盒子里面内容的宽高，真正盒子的宽度=width+padding+border

但是有的时候我就想设置盒子的宽高；

实际上，box-sizing就是用来设置盒子模型中，宽高的行为，由于他默认是content-box（也就是默认设置内容的宽高），padding、border都布置在width、height的外边；

另一个是border-box：padding和border都布置在width、height里面！

补充

如果文字过多，但是仍然想显示在一行上，即：单行显示省略号：

white-space:nowrap;//强制在一行显示（不换行）

overflow:hidden;
text-overflow:ellipisis;//文本超出，显示省略号

固定保留某几行显示省略号：这5行代码是固定的；

.item{
    overflow:hidden;
    text-overflow:ellipsis;
    //flex布局的前身，用来做多行保留时的省略号，这3个属性是必须一块搭配写的；
    display:webkit box;
    -webkit-line-clamp:2;//保留2行
    -webkit-box-orient:vertical;//固定方向
}

定义穿过文本下的一条线：

text-decoration:line-through
avatar
文章
阅读
粉丝