寒假第三周学习

盒子阴影 box-shadow属性

h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选 模糊距离，影子是虚的还是实的、
spread 可选 影子的尺寸(eg：该值为10px。当h v 为0px时，即在盒子下创建一个比原盒子每个边多10px的阴影盒子，然后h v调整位置)
color 可选 影子的颜色
inset 可选 内部阴影

1. 默认为外阴影 但不可以书写outset
2. 盒子阴影不占据空间 不影响其他的排列
3. 速写属性，要按照顺序来写

文字阴影 text-shadow

h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选 模糊距离，影子是虚的还是实的、
color 可选

css书写顺序

1. 布局定位属性
2. 自身盒子属性
3. 文本属性
4. css装饰属性

固定定位到版心右侧的，且可随着视窗缩放而缩放

先固定定位位置设置为50%，再设置margin为网页主体的一半像素值

粘性定位

position：sticky;

1. 以浏览器的可视窗口为参照点移动元素
2. 粘性定位占有原先的位置
3. 必须有top left right bottom其中一个才有效

display和visibility

display隐藏元素后，元素不会占据原有位置
visibility隐藏元素后，元素仍在原为位置

css三角兼容问题

设置行高为0字体大小为0
在设置为直角三角形时，可设置一边为边框为0px,就是直角三角形

outline轮廓线

表单元素，文本域点击后显会示边框，可将该值设置为none

resize属性

设置为none防止拖拽文本域

vertical-align

用于设置一个元素的垂直对齐方式，但是它只针对于行元素或行块盒元素有效

解决图片底部默认空白缝隙

1.将字体大小设置为0
2.将图片的垂直对齐方式改为基线对齐以外的值
3.将图片设置为块盒

文本溢出显示省略号

text-overflow:ellipsis
overflow:hidden
强制显示white-space:nowrap（默认为normal自动换行）

多行文本溢出显示省略号

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical

margin负值运用

1. 设置margin为负值，可解决盒子边框相邻导致增宽
   设置为相应的边框宽度
2. 在设置：hover触发边框改变时，会导致被压住的一边边框无法显示
3. 可以设置为相对定位，这样在z轴上就会处于上方
4. 已经有定位时，可提高z-index的层级

文字围绕效果

行盒排列时 会避开浮动盒子 先排浮动 再排行盒
文字会生成匿名行盒，设置图片为浮动即可

html5语义化标签

header nav
article （内容标签）
section（文章的某个区域）
aside footer

css3新增的属性选择器

div[att] 选择div中有att属性的元素
div[att=“sss”] 选择div中有att属性且值为sss的元素
div[att^=“sss”] 选择div中有att属性且值以sss开头的元素
div[att$=“sss”] 选择div中有att属性且值以sss结尾的元素
div[att*=“sss”] 选择div中有att属性且值中含sss的元素

eg:nth-child和eg:nth-of-type

前者是给所有子元素进行排序，再看该选择的位置是否为eg元素
后者是只给子元素中的eg元素排序，再选择元素