CSS学习笔记二

CSS学习笔记二

CSS盒子模型

Margin(外边距) - 边框外的区域，颜色为透明
注意：margin塌陷
若一个大盒子中包含一个小盒子,给小盒子设margin-top,大盒子会一起向下平移。
解决方案：
1）给大盒子加一个边框
2）给大盒子设置一个overflow属性。overflow: hidden;
3）浮动也可以

Border(边框) - 内边距和内容外的边框
1.边框宽度：border-width
2.边框样式：border-style：
取值：none - - -默认无边框
dotted - - -点线边框
dashed - - -虚线边框
solid - - -实线边框
double - - -两个边框
3.边框颜色：border-color
4.边框属性简写：border-width border-style border-color
5.单独加边框：border-left | reight | top | tottom:值1 值2 值3

注意：元素在页面的实际宽高：
宽度=内容（width，子元素，内容）+左右border +左右padding
高度=内容（height，子元素，内容）+上下border +上下padding

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

CSS内容溢出

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
1.visible - - - 默认值。内容不会被修剪，会呈现在元素框之外。
2.hidden - - - 内容会被修剪，并且其余内容是不可见的。
3.scroll - - - 无论内容是否溢出，但是浏览器会显示滚动条以便查看其余的内容。
4.auto - - - 内容溢出，则浏览器会显示滚动条以便查看其余的内容。
5.inherit - - - 规定应该从父元素继承 overflow 属性的值。

2.文本溢出{text-overflow: clip / ellipsis;}
取值：
1.clip：不显示省略号，而是简单的裁切;
2.ellipsis：当对象内文本溢出时，显示省略（…）标记；

3.空白空间： white-space:
normal- -正常，默认值，忽略空白空间，保留一个空格,正常换行,换行符不保留。
pre- -保留空白空间，但不换行
pre-wrap- -保留空白空间，正常换行
pre-line- -保留一个空白空间，保留换行
nowrap- -强制不换行，不保留空白空间，不保留换行符

一、div内显示一行，超出部分用省略号显示，保留换行符。
条件
1.元素要有宽度 - - -width
2.强制一行显示 - - - white-space: nowrap;
3.容器溢出隐藏 - - - overflow: hidden;
4.文本溢出省略号 - - - text-overflow: ellipsis;

二、div内显示两行或三行，超出部分用省略号显示
1.元素要有宽度 - - -width
2.容器溢出隐藏 - - - overflow: hidden;
4.文本溢出省略号 - - - text-overflow: ellipsis;
5.控制子元素的排列方式 - - -display: -webkit-box;
6.限制行数 - - - -webkit-line-clamp: num(行数);
7.控制垂直水平排列 - - --webkit-box-orient: vertical;

CSS浮动

float 属性 取值：
1.left 元素向左浮动。
2. right 元素向右浮动。（第一个元素在右边）
3. none 默认值。元素不浮动。

作用：上下排列改为水平排列。
注意：1.想要水平排列的元素必须添加浮动属性
2.浮动元素脱离文档流，不占据位置
3.浮动元素不能撑开父元素高度；只要子元素浮动就要设置父元素高度
4.浮动元素在父元素宽度里浮动，如果浮动元素之和>父元素宽度,那么浮动元素会往下掉
文档流：按照正常的布局规则（块级元素:上->下,行内：左->右）
正常情况，父元素高度由子元素撑开（父元素高度=子元素之和）

clear-根据浮动元素去排列显示
取值：
none–默认值，正常排列
left–根据浮动元素，在浮动元素左下方排列
right–根据浮动元素，在浮动元素右下方排列
bottom–根据两端浮动元素，那个高一些，就在那个下方排列。

CSS Position(定位)

position 属性的五个值：

1.static - - -HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

2.relative - - -相对定位元素的定位是相对其正常位置。

3.fixed - - -元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

4.absolute - - -绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于浏览窗口

注意： Fixed定位和absolute使元素的位置与文档流无关，因此不占据空间。

5.sticky - - -粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

CSS元素分类

1.块级元素

特点： a.可以设置宽高
b.独占一行垂直排列
c.块级元素可做所有行内元素容器，和部分块级元素
d.p标签不能做块级元素容器， 宽度默认占据父元素100%；

2.行内元素

特点：a.不可以设置宽高
b.相邻并行排列
c.行内元素不可做块级元素容器
d.遵循盒子模型margin-top|bottom padding-top|bottom没有效果。

2-1置换元素：浏览器根据元素 属性 或 属性值 决定具体显示内容
eg:img,input,textarea,select

2-2非置换元素:除了置换元素，其他都是非置换元素

3.强制类型转换
display:block; - - - 行内元素- >块级元素
display:inline: - - -块级元素->行内元素
display:inline-block: - - -将元素转换为行内块的行内元素
display:none；- - -隐藏元素，除了none以外所有属性值都可以显示元素
注意：（如果元素隐藏之前是行内元素，那么显示就用display:inline；如果元素隐藏之前是块级元素，那么显示就用display:block；）

隐藏元素：display:none 和 visibility:hidden

区别：display:none 消失不占据位置
visibility:hidden消失后依然占据位置

浮动flot 和 inline-block都可以让元素在同一行排列，又可以设置宽高

浮动flot 和 inline-block 区别：
1.inline-block：元素之间有间隙，解决问题：设置父元素字体大小
2元素设置flot,会造成高度塌陷；
元素设置inline-block，一样可以撑开父元素高度。

CSS图片居中

1.父元素设置：text-align：center;
2.小盒子转换为行内块级元素display:inline-block；再加上：vertical-align:middle;
3:小盒子后加同级元素span，并对span进行
width:0;
height:100%;
display:inline-block; - - -转为行内块级元素
vertical-align:middle; - - -垂直居中对齐

div居中

父元素相对定位position ;relactive;
子元素绝对定位absolute，top:50%; left:50%;
子元素位移：transform:translate(-50%,-50%)

包含块：实际上就是定位的参考框
z-index:设计元素定位层级关系 取值：number 值越大，显示在越上面
只能跟定位元素一起使用

包含块：实际上就是定位的参考框
z-index:设计元素定位层级关系 取值：number 值越大，显示在越上面
只能跟定位元素一起使用

解决高度塌陷

1，给父元素设置overflow：hidden
缺点：会把定位在元素之外的元素隐藏

2.利用空标签 浮动元素下方添加空标签
空标签样式{
height：0
clear：both
overflow：hidden
}
3，万能清除浮动(推荐使用)
父元素：：after{
content：“”
display：block
height：0
clear：both
overflow：hidden
}
4，添加浮动

伪元素

“first-” 伪元素只能用于块级元素。
1.:first-letter向文本的第一个字母添加特殊样式。
2.:first-line 向文本的首行添加特殊样式。

“-” 伪元素只能用于行内元素。
1.:after 在元素之前添加内容。
E：：after{
content：“ 内容 | url（图片路径） ”；
}
2.E：: before 在元素之后添加内容。