02-css基础 --highgh的博客 --HTML学习笔记

css的基础概念

层叠样式表，是一种用来渲染HTML（超文本标记性语言）文件样式的计算机语言。

1. 在HTML元素的style属性中
2. 在head标签里的style标签中
3. 以单独存放在一个CSS文件中

css的选择器

元素选择器
标签选择器	div
id选择器	#div
类名选择器	.div

派生选择器
后代选择器	div span
父子选择器	div >span

标签选择器<类名选择器<id选择器<行内样式<!important

超链接伪类选择器
ele:link：鼠标未点击前的状态(配合a标签使用)	.id:link{color:red}
ele:visited：超链接访问之后的状态	.id:visited{color:green}
ele:hover：鼠标移入时的状态，一定要在上面两个之后才会生效	.id:hover{color:blue}
ele:active：鼠标长按时的状态	.id:active{color:red}

before、after	伪元素
ele::before{content:’’}	content为必填项，可以是unicode图标

伪类选择器
nth-child(n)	选取父元素的第n 个子元素，不论元素标签的类型
nth-of-type(n)	选择器选取父元素的第 n 个指定类型的子元素

css的盒模型布局

由四部分组成：content -> padding（内边距） -> border（边框） -> margin（外边距）

box-sizing属性	用来设置元素的盒模型布局
border-box	IE盒模型
content-box	默认值，会撑大
inherit	继承父元素

css边距

值	描述
margin(10px,10px,10px,10px)	上 /右 /下 /左
margin(10px,10px,10px)	上 /左右/ 下
margin(10px,10px)	上下/ 左右
margin(10px)	统一

边框样式常用写法：border：1px solid black;

border-style边框样式

常用样式：dotted（点状线）、dashed（虚线）、solid（实线）、double（双实线）
不常用样式：groove（沟槽）、ridge（脊边框）、inset（陷入效果）、outset（凸出效
果）

box-shadow：盒模型阴影（边框阴影）

常用写法	box-shadow：1px 1px 1px black
第一个参数	阴影的横向偏移量
第二个参数	阴影的纵向偏移量
第三个参数	阴影的模糊程度大小
第四个参数	阴影的颜色

css元素之间的转换

元素之间的转换

属性	描述
display:block	将元素转化成块级元素
display:inline	将元素转化成行级元素
display:inline-block	将元素转化成成行内块元素

display:none，隐藏元素，隐藏之后位置彻底消失，不会占据文档的任何空间

visibility:hidden，隐藏元素，元素虽然隐藏了，但是他的标签还占着原来的位置

css的定位

相对定位

relative：相对于元素 本身最初 的位置进行定位，会继续占有原来所在文档的位置，relative属性会作为子元素absolute的参照物。

绝对定位

absolute：设置绝对定位属性之后，元素会脱离文档流，不占据文档中任何位置，同时会参照 父容器 或再往上容器有设置（relative/absolute/fixed）属性的元素作为参照物进行定位

固定位置

fixed：设置固定位置属性后，元素会脱离文档流，不占据文档任何空间，会以 屏幕 的视窗作为参照物。

浮动属性

float：定义元素在哪个方向浮动，浮动元素也脱离文档流，
但是与绝对定位相反，会保持原有的流动性，浮动会把元素都变成块布局模式。

元素设置浮动之后，设置浮动的元素都会有块元素的特性，可以设置宽高。元素设置浮动之后会尽可能的占据最小的空间。

浮动属性导致的问题以及解决方法
当一个容器没有设置高度时，该容器里的元素设置了浮动属性之后，因为我们的高都是由内容撑开自适应的高度，所以会导致高度塌陷的问题，从而影响我们的布局模式。

1. 预先给容器设置高度，高度一般都是自适应。
   给浮动元素的父容器添加一个overflow属性（超出部分的处理），该属性会重新计算容器的高度，浮动元素也会算进去。
2. 给浮动元素的父容器也添加一个float属性。
3. 在浮动元素的下面添加一个空标签（有无内容都可），添加一个clear:both，该属性会清除该元素以上浮动元素导致的高度塌陷的问题。
4. 在父容器中设置伪元素**::after**，在CSS属性中设置clear:both，也可以清除浮动产生的问题