CSS知识点（样式）

客官°小女子只卖身不卖艺 2021-11-17 21:42 536阅读 0赞

#### 1.字体样式 ####

font-family: “楷体”;  
font-size: 50px;  
font-style: italic;  
font-weight: 900;  
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

#### 2.文本样式 ####

.sp {
        
    				/* color: blue; */
    				/* color: #ff0000; */
    				/* color: rgb(255,0,0); */
    				/* color: rgba(255,0,0,0.1); */ /*alpha*/
    			}

当内容是单行时: 设置行高和容器的高度一致,可以用于垂直居中  
当内容是多行时: 表示行与行之间的间距

#### 3.列表样式 ####

ul li {
        
    				/* list-style: none;
    				list-style-image: url(../img/b_2.gif);
    				list-style-position: inside; 
    				list-style-type: none; */
    			}

#### 4.背景样式 ####

.div1 {
        
    				border: 1px solid red;
    				width: 300px;
    				height: 300px;
    				/* background-color: red; */
    				/* background-image: url(../img/b_2.gif);
    				background-repeat: no-repeat;
    				background-position: 0px 0px; */
    				background: url(../img/b_2.gif) no-repeat;
    				background-size: contain;
    				
    			}

#### 5.盒子模型 ####

margin: 外边距 距离兄弟容器或者父容器边框的距离  
padding: 内边距 边框和内容之间的距离(留白)  
border: 边框  
content: 内容 (放置容器的文本和元素)  
width: 元素的宽度  
height: 元素的高度

一个盒子所占浏览器的面积是: 外边距 + 边框 + 内边距 + 内容
    			我们所关系的一个盒子的面积: 边框 + 内边距 + 内容
    			
    			默认我们定义元素的宽度和高度指的是 内容的宽度和高度,是固定不变
    			这种盒子成为 content-box
    			可以设置盒子位边框盒子

#### 6.圆角边框 ####

border-radius: 20px 10px 50px 30px;  
四个属性值按顺时针排列

利用border-radius属性制作圆形的两个要点  
元素的宽度和高度必须相同  
圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

半圆形  
利用border-radius属性制作半圆形的两个要点  
制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值  
制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

扇形  
利用border-radius属性制作扇形遵循“三同，一不同”原则  
“三同”是元素宽度、高度、圆角半径相同  
“一不同”是圆角取值位置不同

#### 7.盒子阴影 ####

box-shadow: -13px -14px 10px（模糊半径） 10px（阴影宽度） red inset;  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlZF9lYXJlZF9zbGlkZXI_size_16_color_FFFFFF_t_70]

#### 8.display属性 ####

行内元素:  
1.在一行显示  
2.不能够设置宽高

块级元素:
    			1.独占一行
    			2.能够设置宽高
    		
    		display: block; 能够将行内元素变成块级元素
    		display: inline; 能够将块级元素变成行内元素
    		display: none; 设置元素显示或者隐藏
    		display: inline-block; 具备行内元素在一行显示的特点，同时具备块级元素的能够设置宽高的特点
    		
    		inline-block: 能够让元素水平排列
    		水平排列的方式
    			1.inline-block
    			2.float

#### 9.float属性 ####

float浮动  
浮动的理解:  
1.浮动的盒子可以向左浮动，也可以向右浮动，  
直到它的外边缘碰到了包含框或者另一个浮动盒子为止  
2.设置了浮动的元素和未设置浮动的元素是不在一个水平面上的，  
未设置浮动元素的内容会流向浮动元素的浮动方向的反方向  
3.如果父级元素里面所有的元素都设置了浮动，那么会导致父级边框塌陷  
4.解决父级边框塌陷问题有三种办法  
方式一: 设置空div防止父级塌陷  
方式二: 给父级边框设置高度  
方式三: 给父级边框设置overflow属性

排列方式:
    			默认都是标准流排列方式
    			标准流排列方式: 块级元素元素从上至下，行内元素从左至右排布

浮动的理解:  
1.浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到了包含框或者另一个浮动盒子为止  
2.设置了浮动的元素和未设置浮动的元素是不在一个水平面上的，未设置浮动元素的内容会流向浮动元素的浮动方向的反方向  
3.如果父级元素里面所有的元素都设置了浮动，那么会导致父级边框塌陷  
4.解决父级边框塌陷问题有三种办法  
方式一: 设置空div放置父级塌陷  
方式二: 给父级边框设置高度  
方式三: 给父级边框设置overflow属性

#### 10.overflow属性 ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlZF9lYXJlZF9zbGlkZXI_size_16_color_FFFFFF_t_70]: /images/20211116/266718f84b08464787c45c25e3fb7444.png