标签：定位 盒子 入门 元素 边框 快速 选择器 css 属性
1.什么是css
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.css语法规范
使用html时，需要遵从一定的规范，css也是如此，想要熟练地使用css对网页进行修饰，首先需要了解css样式规则
css规则由两个主要的部分构成：选择器以及一条或多条声明
选择器是用于指定css样式的html标签，花括号内是对该对象设置的具体样式，
属性和属性值是以键值对的形式出现
属性和属性直接用英文的“：”分开
多个键值对之间用“;” 进行区分
3.css基础选择器
3.1 css选择器的作用
选择器就是根据不同需求把不同标签选出来，这就是选择器的作用。简单来说，就是选择标签用的。
3.2 选择器分类
选择器可分为基础选择器和复合选择器两大类：
基础选择器是由单个选择器组成
基础选择器又包括：标签选择器，类选择器，id选择器和通配符选择器
3.3 字体css属性
font-family 设置字体系列
font-size 设置字号大小
font-style 设置字体样式 normal：默认值，italic：斜体
3.4 文本css属性
color 颜色属性
text-align 文本对齐（right：右对齐，center：居中对齐，left：左对齐）
text-decoration 文本装饰（underline：下划线，line-through：删除线，overline：上划线，none：默认）
text-indent 首行缩进 （取值：像素，如果写了2em，则是缩进当前元素两个文字大小的距离）
line-height 用于设置行间的距离，可以控制文字行与行间的距离
4.css复合选择器
4.1 后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：元素1 元素2 { 样式声明 }
元素1和元素2之间用空格隔开
4.2 子选择器
子选择器只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。
语法：元素1 > 元素2 { 样式声明 }
元素1是父级，元素2是子集，最终选择的是元素2
4.3 并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明，并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法：元素1,元素2 { 样式声明 }
元素1和元素2中间用逗号隔开
4.4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素，伪类选择器书写最大的特点就是用冒号（:）表示，比如：hover、:first-child。
因为伪类选择器很多，比较常用的有链接伪类，结构伪类等。
1）链接伪类选择器
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /*选择鼠标指针位于其上的链接 */
a:active /*选择活动链接（鼠标按下未弹起的链接）*/
为了确保生效，请按照 LVHA 的顺序进行书写，:link - :visited - :hover -:active
2）focus伪类选择器
:focus伪类选择器用于选择获取焦点的表单元素
焦点就是光标，一般情况下，input类表单元素才能获取，因此这个选择器也主要针对表单元素来说
input:focus {
border-color: yellow;
}
5.css的元素显示模式
5.1 块元素
常见的块元素有 h1~h6，p，div，ul，ol，li等，其中div是最典型的块元素
块级元素的特点：
1）比较霸道，自己独占一行；
2）高度、宽度、外边距以及内边距都可以控制；
3）宽度默认是容器的100%；
4）是一个容器及盒子，里面可以放行内或者块级元素。
5.2 行内元素
常见的行内元素有a，strong，b，span，em等，其中span是最典型的行内元素
行内元素的特点：
1）相邻行内元素在一行上，一行可以显示多个；
2）高、宽直接设置是无效的；
3）默认宽度就是它本身内容的宽度；
4）行内元素只能容纳文本或其他行内元素。
5.3 行内块元素
在行内元素中有几个特殊的标签 <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。因此称它们为行内块元素。
行内块元素特点：
1）和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）；
2）默认宽度就是它本身内容的宽度（行内元素特点）；
3）高度，行高，外边距以及内边距都可以控制（块级元素特点）。
5.4 元素转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性，比如想要增加链接<a>的触发范围。
转换为块元素：display：block；
转换为行内元素：display：inline；
转换为行内块：display：inline-block；
6.css的背景
通过css的背景属性，可以给页面元素添加背景样式，背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。
6.1 背景颜色
background-color 属性定义了元素的背景颜色
background-color：颜色值
默认值是transparent，意思是透明的
6.2 背景图片
background-image 属性描述了元素的背景图像，实际开发常见于一些logo或者一些装饰性的小图片或者是超大的背景图片
body {
background-image: url(../../../assets/img/avatar.png);
}
默认值是none，意思是无背景图
6.3 背景平铺
如果需要在html上对背景图片进行平铺，可以使用background-repeat属性
background-repeat: no-repeat | repeat | repeat-x | repeat-y;
默认情况下背景图片是平铺的
6.4 背景图片位置
利用background-position属性可以改变图片在背景中的位置
background-position：x y;
参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精确单位
1）如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left center和 center left是一样的意思。
2）如果只指定了一个方位名词，另一个值省略，则第二个默认居中对齐。
3）如果参数值是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标。
4）如果只指定了一个数值，那该数值一定是x坐标，另一个默认垂直居中。
6.5 背景图片固定
background-attachment 属性设置背景图片是否固定或者随着页面的其余部分滚动。
background-attachment：scroll | fixed
默认为scroll 随着页面的滚动而滚动。
6.6 背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background 中，从而节约代码量。
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background：transparent url(image.jpg) repeat-y fixed top ;
6.7 背景颜色半透明
css3为我们提供了背景颜色半透明的效果
background：rgba(0,0,0,0.3);
最后一个参数是alpha透明度，取值范围在0~1之间
我们可以把0.3的0省略掉，写为 background：rgba(0,0,0, .3);
7.盒子模型
7.1 边框border
border可以设置元素的边框，边框有三部分组成：边框宽度、边框样式、边框颜色。
语法：
border：border-width || border-style || border-color
| 属性 | 作用 |
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
边框的复合写法：
border：1px solid red; 没有顺序
边框分开写法：
border-top：1px solid red; 只设置上边框，其余同理
表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。
语法：
border-collapse：collapse; 表示相邻边框合并在一起
7.2 内边距padding
padding属性用于设置内边距，即边框与内容之间的距离。
padding-left、padding-bottom、padding-left、padding-right 可以设置盒子的上下左右内边距
padding属性（简写属性）可以有1~4个值
| 值得个数 | 表达意思 |
| padding:5px; | 1个值，代表上下左右都有5像素的内边距 |
| padding:5px 10px; | 2个值，代表上下内边距5像素，左右内边距10像素 |
| padding:5px 10px 20px; | 3个值，代表上内边距5px，左右内边距10px，下内边距20ox； |
| padding:5px 10px 20px 30px; | 4个值，上是5px，右是10px，下是20px，左是30px 顺时针 |
7.3 外边距margin
margin属性用于设置外边距，即控制盒子与盒子之间的距离
| 属性 | 作用 |
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin简写方式代表的意义和padding完全一样
外边距可以让块级盒子水平居中，但是必须满足两个条件：
1）盒子必须指定了宽度，
2）盒子左右的外边距都设置为auto。
7.4 外边距合并
使用margin定义块元素的垂直外边框时，可能出现外边距的合并。
对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：
1）可以给父元素定义上边框
2）可以给父元素定义上内边框
3）可以给父元素添加overflow:hidden
7.4 圆角边框
border-radius 属性用于设置元素的外边框圆角
语法：
border-radius：length;
注意:
1）参数值可以为数值或百分比的形式
2）如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
3）如果是个矩形，设置为高度的一半就可以做
4）该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
7.5 盒子阴影
css3中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子设置阴影
语法：
box-shadow：h-shadow v-shadow blur spread color insert;
| 值 | 描述 |
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色。 |
| inset | 可选，将外部阴影（outset）改成内部阴影 |
例如：
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
7.6 文字阴影
css3中新增了文字阴影，我们可以使用 text-shadow 属性为盒子设置阴影
语法：
text-shadow：h-shadow v-shadow color;
例如：
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
8.浮动
8.1 浮动特性
浮动元素具有行内块元素特性
- 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的
- 行内元素同理
8.2 清除浮动
语法：
选择器{clear:属性值;}
| 属性值 | 描述 |
| left | 不允许左侧有浮动元素 |
| right | 不允许右侧有浮动元素 |
| both | 同时清除左右两侧的浮动 |
清除浮动方法
1.额外标签法也称为隔离法，是w3c推荐的做法 clear:both
2.父级添加overflow属性
3.父级添加after伪属性
4.父级添加双伪属性
清除浮动常用代码：
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
9.定位
9.1 定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式决定元素的定位方式，它通过css的position属性来设置，其值可以分为四个：
| 值 | 语义 |
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
边偏移就是定位的盒子移动到最终位置，有top、bottom、left和right4个属性。
| 边偏移属性 | 示例 | 描述 |
| top | top:80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom:80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left:80px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right:80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
9.2 静态定位
静态定位是元素的默认定位方式，无定位的意思
语法：
选择器 { position：static； }
9.3 相对定位
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法：
选择器 { position:relative; }
相对定位的特点：
1、它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
9.4 绝对定位
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
语法：
选择器 { position:absolute; }
绝对定位的特点：
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（document文档）
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
9.5 固定定位
固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器 { position:fixed; }
固定定位小技巧：固定在版心右侧位置
1、让固定定位的盒子left:50%，走到浏览器可视区（也可以看做版心）的一半位置
2、让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置，就可以让固定定位的盒子贴着版心右侧对齐了。
9.6 粘性定位
粘性定位可以被认为是相对定位和固定定位的混合，sticky粘性的
语法：
选择器 { position:sticky;top:10px; }
粘性定位的特点：
1、以浏览器的可视窗口为参照点移动元素（固定定位特点）
2、粘性定位占用原先的位置（相对定位特点）
3、必须添加top、bottom、right、left其中一个才有效
9.7 定位叠放次序
在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序（z轴）
语法：
选择器 { z-index:1; }
- 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
10.元素的显示与隐藏
10.1 display属性
display属性用于设置一个元素应如何显示
- display：none；隐藏对象
- display：block；除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不占有原来的位置
10.2 visibility可见性
visibility属性用于指定一个元素应可见还是隐藏
- visibility：visible;元素可视
- visibility：hidden;元素隐藏
visibility隐藏元素后，继续占有原来的位置
10.3 overflow溢出
overflow 属性指定了如果内容溢出一个元素的框（超过其指定的高度及宽度）时，会发生什么
| 属性值 | 描述 |
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超过的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分
标签：定位,盒子,入门,元素,边框,快速,选择器,css,属性 来源： https://www.cnblogs.com/fqh2020/p/15721681.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。