CSS重要属性

元素类型

根据元素的显示类型，HTML元素可以主要分为两大类: 块级元素 和 行内级元素。行级元素是只占一行的位置，盒模型中的width、height不适用与行级元素。

块级元素独占父元素一行，包含的HTML标签有：div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr等
行内级元素可以多个元素在同一行父元素中显示，包含的HTML标签有：a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、video、audio等

display属性

display修改元素的显示类型：

css

display: flex; /* 伸缩布局 */
display: inline;  /* 行级元素 */
display: block; /* 块级元素 */
display: inline-block; /* 本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆散成多行 */
display: none;/* 此元素不会被显示,排版时完全被忽略 */

/*  inline 行级元素
    1. 不会独占一行,多个相邻元素会排列在同一行，直到排满换行,其宽度随元素内容而变化
    2. 宽高根据内容决定，设置width,height属性无效
    3. margin和padding属性都只有水平方向上的起效果
*/

 /* block 块级元素
    1. 会独占一行，默认情况下其宽度自动填满其父元素的宽度
    2. 可以设置width,height属性
    3. 可以设置margin和padding属性
    4. 设置 margin: 0 auto; 当前元素水平居中
 */

 /* inline-block 行内块级元素
    1. 将对象呈现为inline对象，故其宽度能由内容撑开
    2. 但是将对象的内容作为block对象呈现,故可以用伪元素first-letter将首字母选中
    3. 设置为inline-block的元素会既具有宽高属性，又具有同行特性
    4. 在父元素中设置 text-align: center; 可以使行内块级子元素水平居中
 */

行级元素

IFC(Inline Formatting Context) 直译为内联格式化上下文。我们可以简单理解为每个盒子都有一个 FC 特性，不同的 FC 值代表一组盒子中不同的排列方式。有的 FC 表示盒子从上到下垂直排列，有的 FC 表示盒子从左到右水平排列等等。而 IFC 则是表示盒子从左到右的水平排列方式。IFC内的排版规则:

盒子在一行内水平摆放, 一行放不下时，会换行显示
text-align 决定一行内盒子的水平对齐
vertical-align 决定一个盒子在行内的垂直对齐
避开浮动(float)元素

盒子模型

HTML中的每一个元素都可以看做是一个盒子，具备content、padding、border、margin属性。

markdown

* 盒子宽度 = width + padding左右 + border左右
* 盒子高度 = height + padding上下 + border上下
* `box-sizing: border-box;`: 盒子大小包含border在内的宽度,盒子默认大小只有conetnt的大小
* `overflow`: 内容溢出的时候行为
* `margin: 0 auto;`: 设置元素水平居中
* `margin负值`: 让元素位移及边框合并

内容设置宽度 对于行内级非替换元素来说,设置宽高是无效的

css

* width: 100px;  /* 设置宽度 */ 
* height: 100px;  /* 设置高度 */ 
* min-width: 100px;  /* 设置最小宽度 */ 
* min-height: 100px;  /* 设置最小高度 */ 
* max-width: 100px;  /* 设置最大宽度 */ 
* max-height: 100px;  /* 设置最大高度 */

设置内间距 padding

css

padding: 20px 40px 50px 30px; /* 按照 上 右 下 左 方向设置内边距值。 */
padding: 20px 40px 50px; /* 顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding: 20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding: 20px; /* 设置四边内边距为20px */
padding-top: 20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */

设置边框 border

css

border-top:10px solid red;   /* 同时设置宽度样式和颜色 */  
border-top-color:red;    /* 设置顶部边框颜色为红色 */  
border-top-width:10px;   /* 设置顶部边框粗细为10px */   
border-top-style:solid;  /* 设置顶部边框的线性为实线，solid(实线) dashed(虚线)  dotted(蚂蚁线) */
border: 15px 20px 25px 30px; /* 按照 上 右 下 左 方向设置边框宽度,也可以单独谁在 */
border-color: red yellow black gold; /* 设置边框颜色，也可以单独设置 */
border-radius: 5px 10px 15px 20px; /* 设置圆角，也可以单独给每个角设置，border-radius大于或等于50%时，就会变成一个圆 */
border-collapse: collapse; /* 针对表格的属性。合并（collapsed）模式下，表格中相邻单元格共享边框 */

外轮廓 outline 不占用空间,默认显示在border的外面,一般用于去除a元素、input元素的focus轮廓效果

css

outline: 20px  solid  red; /* 设置外轮廓 宽度 样式 颜色 */
outline-width:: 20px 40px 50px 30px; /* 按照 上 右 下 左 方向设置外轮廓宽度 */
outline-style: solid; /* 取值跟border的样式一样，比如solid、dotted等 */ 
outline-color: red; /* 外轮廓的颜色 */

阴影 box-shadow

css

box-shadow: 5px 8px 10px 12px hotpink inset;
5px: 水平上的偏移量
8px: 垂直上的偏移量
10px: 阴影模糊半径
12px: 阴影向四周扩张的大小
hotpink: 阴影颜色
inset: 阴影向内部扩张

如果需要给文字设置阴影,使用text-shadow。在线调整元素阴影网址
 在线调整文字阴影网址

设置外间距 margin。一般用于兄弟关系的元素

css

margin: 20px 40px 50px 30px; /* 按照 上 右 下 左 方向设置外间距 */
margin: 20px 40px 50px; /* 顶部外间距20px，左右外间距40px，底部外间距50px */ 
margin: 20px 40px; /* 设置上下外间距为20px，左右外间距为40px*/ 
margin: 20px; /* 设置四周外间距为20px */
margin:x auto; /* 设置元素水平居中 */

关于 margin 塌陷

margin-top传递: 如果块级元素的顶部线和父元素的顶部线重叠，那么**这个块级元素的margin-top值会传递给父元素。**比如下面的代码:

html

<style>
    .box1{
        width: 300px;
        height: 200px;
        background-color: red;
    }
    .box2{
        width: 100px;
        height: 100px; 
        background-color: aqua;
        margin-top: 100px;
    }
</style>
    
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

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

html

<style>
    .box1{
        width: 300px;
        height: auto; /* 将父元素高度设置成auto */
        background-color: red;
    }
    .box2{
        width: 100px;
        height: 100px; 
        background-color: aqua;
        margin-top: 100px;
    }
</style>
    
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3">2345</div>
</body>

这种也称为 margin 塌陷，解决方法有以下几种

父元素设置内间距padding，并且设置box-sizing: border-box; 盒子大小包含border在内的宽度
父元素设置边框 border: 1px solid transparent;
父元素触发BFC,设置overflow: hidden 或者 overflow: auto
使用伪元素类：

css

    .clearfix:before{
        content: '';
        display:table;
    }

建议 margin一般是用来设置兄弟元素之间的间距。 padding一般是用来设置父子元素之间的间距

关于 margin 合并

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）。折叠后的最终值取两个值中较大的值。比如下面的代码：

html

<style>
    .box1{
        height: 100px;
        background-color: red;
        margin-bottom: 30px;
    }
    .box2{
        height: 50px; 
        background-color: aqua;
        margin-top: 20px;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

这种情况下只会取 box1 的值,解决这种情况的方式

设置单个元素的外边距,一般设置margin-top
将元素浮动或者定位

background 属性

背景元素属性，可以在一个div元素中设置多个背景图像（并指定他们的位置）。查看background属性

css

background: red url("imgs/kobe01.jpg") center no-repeat; /* 一次设置多个背景属性， background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; */
background-color: red; /* 设置背景颜色 */
background-image: url("imgs/kobe01.jpg"), url("imgs/kobe02.png"); /* 设置背景图片，可设置多个，注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的 */
background-repeat: no-repeat; /* 设置背景图片是否要平铺 */
background-position: left; /* 设置背景图片位置，如果只设置了1个方向，另一个方向默认是center*/
background-attachment: scroll;/* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。 */

值	说明	使用方式
background-image	指定要使用的一个或多个背景图像,会覆盖在background-color上面	`background-image: url(./a.jpg),url(./b.png);`
background-repeat	按照什么方式重复背景图像	* repeat:默认值，背景图将向垂直和水平方向重复 * repeat-x: 只有水平位置会重复背景图像 * repeat-y: 只有垂直位置会重复背景图像 * no-repeat: background-image不会重复 * inherit: 指定background-repea属性设置应该从父元素继承
background-color	指定要使用的背景颜色	1
background-position	指定背景图像的位置	`left right center top bootom`或`background-position: 25% 75%;`
background-size	指定背景图片的大小	`cover contain`或`background-size: 50% auto` `background-size: 50%`:只写一个数字表示宽度是%50，高度根据宽高比自动计算
background-origin	指定背景图像的定位区域	3
background-clip	指定背景图像的绘画区域,根据盒子模型的边距进行剪切	* border-box: 默认值，背景绘制在边框方框内（剪切成边框方框） * padding-box: 背景绘制在衬距方框内 * content-box: 背景绘制在内容方框内。
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	* scroll: 默认值，背景图片随着页面的滚动而滚动 * fixed: 背景图片不会随着页面的滚动而滚动 * local: 背景图片会随着元素内容的滚动而滚动。

background使用技巧两边圆角的按钮可以使用背景图进行制作，两边圆角各切一张图，中间纯色是一张图。利用平铺的方式对中间图片进行平铺。组成圆角按钮

vertical-align

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。默认时候baseline。

文本的baseline是字母x的下方，Inline-block默认的baseline是margin-bottom的底部（没有，就是盒子的底部），Inline-block有文本时，baseline是最后一行文本的x的下方。

markdown

* baseline(默认值)：基线对齐（你得先明白什么是基线）
* top：把行内级盒子的顶部跟line boxes顶部对齐
* middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐
* bottom：把行内级盒子的底部跟line box底部对齐

当文字和图片在一行时，解决图片下边缘的间隙方法:

设置vertical-align为top/middle/bottom
将图片设置为block元素

Sprite 精灵图

精灵图是一种CSS图像合成技术，将各种小图片合并到一张图片上，利用CSS的背景定位来显示对应的图片部分。注意：控件的大小要跟图标一致，向左是-x,向下是-y。比如这张精灵图

如果使用红色的微博图标，参考下面的代码

css

div{
    width: 30px;
    height: 30px;
    background-image: url(./web_img_2.png);
    background-position: -126px -30px;
    background-repeat: no-repeat;
}

值和单位

关键字： initial/inherit 字符串： “string” URL： url(/logo.png) 长度：100px、5em 百分比： 50% 整数： z-index:5 浮点数： line-height:1.8 颜色： #ff0000 时间： 300ms

长度的表示方法 px：像素点 in 英寸 cm 厘米 mm 毫米 pt 磅 1/72 英寸 pc 1/6 英寸 em 元素字体大小 rem html字体大小 vh 1%窗口高 vw 1%窗口宽 vmax vwvh 较大者 vmin vwvh 较小者

CSS重要属性 ​

元素类型 ​

display属性 ​

行级元素 ​

盒子模型 ​

关于 margin 塌陷 ​

关于 margin 合并 ​

background 属性 ​

vertical-align ​

Sprite 精灵图 ​

值和单位 ​

CSS重要属性

元素类型

display属性

行级元素

盒子模型

关于 margin 塌陷

关于 margin 合并

background 属性

vertical-align

Sprite 精灵图

值和单位