Document

CSS基础2——优先级&盒子模型&元素显示模式

2024-04-30
dfer
303
css html 前端 CSDN

本节笔记详解了CSS的三大特性(继承性、层叠性、优先级)，并且总结了盒子模型的相关属性，最后归纳了元素的显示模式及其在特定场景下的相互转换。

CSS三大特性

继承性

可以继承的常见属性(文字控制属性都可以继承，控制标签本身的都不能继承)：
- color font-style font-weight font-size font-family text-indent text-align line-height…
可以通过调试工具判断样式是否可以继承
但是对于a标签，因为浏览器默认给它设置了蓝色，所以无法被父级的颜色改变
代码表示：

层叠性

当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。不同时，哪个选择器优先级高就选哪个

优先级

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：继承(如在body中加样式)<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important(不要在继承中加该语句)

简单理解：谁选择的范围更大，其优先级更低

行内式写法如下：
!important写法

权重叠加计算

如果是复合选择器，此时需要通过权重叠加的计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式：
- 先看该样式能否直接选中内容而非继承选中内容。然后比哪个选择器的个数更多就用哪个，先看第一级，若第一级就比出来了，则不用看后面。否则按优先级继续往后面比(类似字典序)
- 如果都是继承关系，则看哪个样式继承的优先级更高，就选哪个样式
代码表示

盒子模型

页面中的每一个标签，都可以看作是一个"盒子"，通过盒子的视角更方便布局
浏览器在渲染显示网页时，会将网页中的元素看作是一个个矩形区域，也将其称之为"盒子"
CSS中规定每个盒子分别由：内容区域(content)、内边距区域(padding 内容和盒子边缘的距离)、边框区域(border 盒子边框的宽度)、外边距区域(margin 俩盒子之间的距离)构成
- 内容区域：width、height 取值：数字+px
- 内边距区域(加了padding和border：都会把盒子撑大)：padding 取值：数字+px
  - 可以当作复合属性使用，表示单独设置某个方向的内边距，顺时针转，取4个值：上右下左。取3个值：上左右下。取2个值：上下左右。取1个值：上下左右
- 边框区域(复合属性)：border 取值：数字+px(线条宽度) solid(线条种类) red(线条颜色)(快捷键：bd+tab)
  - solid：实线
  - dashed：虚线
  - dotted：点线
  - 如果只给盒子的某个方向单独设置边框，则：border - 方位名词。属性值：连写的取值
    - 代码表示
```
border-left:5px dotted #000;
border-right:5px dotted #000;
```
  - 补充(了解)：边框粗细： border-width、边框样式：border-style、边框颜色：border-color
  - 盒子的最终尺寸=宽高+边框线的尺寸
- 代码表示
```
<style>
    div{
        width: 280px;
        height: 280px;
        background-color: #ffc0cb;
        border: 10px solid #00f;
    }
</style>
```
- 外边距区域(margin)：类似padding

案例—新浪导航

建议css的书写顺序：从外到内，先盒子布局(宽高，边框、背景色等等)，然后放内容，调节内容的位置，然后控制内容的细节

代码表示

<style>
    .box{
    /*设置box大盒子的高度和顶部底部的边框线，宽度不设，默认和浏览器一样宽度*/
        height: 40px;
        border-top: 3px solid #ff8500;
        border-bottom: 1px solid #edeef0;
    }
    /* 按照继承关系写，box里面的a */
    .box a{
        width: 80px;
        height: 40px;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        color:#4c4c4c;
        line-height: 40px;
        font-size: 12px;
    }
	/*设置鼠标悬停时候a标签的状态*/
    .box a:hover{
        color: #ff8400;
        background-color: #eee;
    }
</style>

<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
</body>

新浪案例的优化：对于导航中字符数不同的情况(因为不知道具体字符数有多少，不好设置宽度)，不要单独设置宽了，利用padding来优化。

效果如下：

CSS3盒子模型(自动内减)
- 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大，如下解决方法：
  - 手动内减：自己计算多余大小，手动在内容中减去
  - 自动内减：给盒子设置属性：box-sizing ：border-box；即可。浏览器会自动计算多余大小，自动在内容中减去
    - 代码表示：设置好盒子的width、height、border、padding之后加上上述代码，浏览器会自动计算
```
<style>
    div{
        width: 300px;
        height: 300px;
        background-color: pink;
        border: 10px solid #000;
        padding: 20px;
        box-sizing: border-box;
    }
</style>
```
清除默认的内外边距(如p、h等标签有默认边距)
- ```
*{
	margin:0;
	padding:0;
}
```
- 版心居中：网页的有效内容居中
  
  margin:0 auto;

案例：网页新闻列表案例

代码表示

<style>
    /* 从外到内设置格式 */
    *{
        margin:0;
        padding:0;
        /* 让所有的标签都可以自动内减 */
        box-sizing: border-box;
    }

    /* 设置div大盒子的宽高、边框线、外边距、填充距离 */
    .new{
        width: 500px;
        height: 400px;
        border: 1px solid #ccc;
        margin: 50px auto;
        padding: 42px 30px 0;
    }

    /* 设置标题各式：其在div的里面 */
    .new h2{
        font-size: 30px;
        border-bottom: 1px solid #ccc;
        line-height: 48px;
    }
    /* 设置列表整体的各式：将其前面的标签去掉 */
    .new ul{
        list-style: none;
    }
    /* 设置每个列表各式：高、下边线、左边距填充、行高 */
    .new li{
        height: 50px;
        border-bottom: 1px dashed #ccc;
        padding-left: 28px;  
        line-height: 50px;
    }
    /* 设置a标签的格式：将下划线删去，设置字体大小和颜色 */
    .new a{            
        text-decoration: none;
        font-size: 18px;
        color: #666;    
    }   
</style>


<body>
    <div class="new">
        <h2>最新文章/New Articles</h1>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">体验js的魅力</a></li>
            <li><a href="#">jquery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jquery中的链式编程是什么</a></li>
        </ul>

    </div>
</body>

注意
- 对于外边距合并的情况(上一个盒子的下面外边距是50px，下一个盒子的上外边距是50px，则两个盒子的距离为50px)：垂直布局的块状元素上下的margin会合并，最终取两者距离为margin的最大值。解决办法：只需要给其中一个盒子设置margin即可
- 对于互相嵌套的块级元素(大盒子中嵌套小盒子，小盒子的上外边距为50px时，最终结果作用在大盒子上)，解决方法：
  - 给父元素设置border-top或者padding-top(分割父子元素的margin-top)(不太合理，要是没有边线和padding要求，则不能这样)
  - 给父元素设置overflow: hidden(完美方法)
  - 将子类转为转换成行内块元素(因为上面的bug只针对块级元素有用，将其不设置为块级元素即可)
  - 设置浮动
- 行内元素的内外边距问题(margin和padding)：即若想要通过m和p改变行内元素的位置，则无法生效(上下无法生效)。解决方法：加行高(line_height)。或者修改显示模式(如下)

元素显示模式

块状元素

显示特点
- 独占一行
- 宽度默认是父元素的宽度(如div标签的宽度默认是body的宽度)，高度默认由内容撑开
- 可以设置宽高
代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…

行内元素

显示特点
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签：a、span、b、u、i、s、strong、ins、em、del…

行内块元素

显示特点
- 一行可以显示多个
- 可以设置宽高
代表标签：input、textarea、button、select、img…

元素显示模式转换

目的：改变元素的默认显示的特点，让元素符合布局要求
语法：

属性效果使用频率

display: block 转换成块级元素较多

display: inline-block 转换成行内块元素较多

display: inline 转换成行内元素极少
代码示例

属性	效果	使用频率
display: block	转换成块级元素	较多
display: inline-block	转换成行内块元素	较多
display: inline	转换成行内元素	极少

拓展

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等。但是，p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素。但是，a标签不能嵌套a标签

上一篇： PHP程序员的技术成

下一篇：【唯美官网上线倒计时