CSS知识点（样式）

2019-07-31 10:36:54 阅读：187 来源： 互联网

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;
在这里插入图片描述

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属性

标签：浮动,知识点,盒子,父级,样式,元素,边框,设置,CSS
来源： https://blog.csdn.net/red_eared_slider/article/details/97891029

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9