【鸿蒙开发从0到1-day03】
css进阶
- 一.结构伪类选择器
- 二.伪元素选择器
- 三.PxCook
- 四.盒子模型
- 五.清除默认样式
- 六.盒子模型-元素溢出
- 七.外边距问题-合并现象
- 八.行内元素-内外边距的问题
- 九.盒子模型-圆角
- 十.盒子的过渡属性
- 十一.盒子模型 - 阴影
- 十二.透明度
- 十三.总结
一.结构伪类选择器
选择器 说明
E:first-child 查找第一个E元素
E:last-child 查找最后一个E元素
E:nth-child(N) 查找第n个E元素(第一个元素N的值为1)
运行结果:
ps:想要设置段落1样式,不能通过.box p:first-child{}
div E:first-child{}代表的是即是div中的E孩子并且
E孩子必须是div中的第一个孩子,div E:lastchild也是如此
E:nth-child(公式)
根据元素的结构关系查找多个元素
功能 公式
偶数标签 2n
奇数标签 2n-1,2n+1
找到五的倍数的标签 5n
找到5个以后的标签(包含5) n+5
找到五个以前的标签(包含5) -n+5
运行结果:
二.伪元素选择器
作用: 创建虚拟元素(伪元素),用来摆放装饰性的内容
选择器 说明
E::before 在E元素里面最前面添加一个伪元素
E::after 在E元素里面最后面添加一个伪元素
ps:必须设置content:属性,用来设置伪元素的内容,如果没有内容,则引号留空即可
伪元素默认行内显示模式
权重和标签选择器相同
运行结果:
三.PxCook
是一款切图设计的工具软件,支持psd文件的文字,颜色,距离自动智能识别
开发面板(自动智能识别)
设计面板(手动测量尺寸和颜色)
点击设计模块,通过左边窗格中的工具进行测量
空格键+鼠标 = 拖拽
删除: 选中+delete
四.盒子模型
作用:布局网页,摆放盒子的内容
内容区域--width&height
内边距---padding(内容和盒子边缘之间)
边框线--border
外边距--margin(出现在盒子外边)
border(快捷键bd)属性值 : 三个属性值不区分顺序
边框线粗细 数字+px
线条样式 solid dashed虚线 dotted点线
颜色 color
也可以单方向设置边框border-left/top/right/bottom
运行效果:
padding内边距:设置内容与盒子边缘之间的间距
属性名padding /padding-方位名词
ps内边距会撑大盒子从而改变盒子的大小
如果padding只有一个取值,那么他就是四周都是这个内边距
也可以通过padding-方位名词可以只对一个方向进行内边距设置
如果padding有多个值,那么就是从上开始顺时针赋值,如果当前方向没有值,就是与其对面的值保持一致
运行结果:
绿色区域就是内边距
外边距(margin):设置盒子与盒子之间的距离
也可以使用margin-方位对每个方位设置不同的外边距
运行结果:
上外边距20px
左外边距20px:
盒子水平居中:
margin: 0px auto;
前提条件:
1盒子必须具有具体的长宽尺寸
2.元素必须是块级元素
运行结果:
五.清除默认样式
比如默认的内外边距,标题标签,a标签,ul,li,p,em/i
运行结果:
六.盒子模型-元素溢出
overflow:
hidden:溢出隐藏
scroll:无论是否溢出都会有滚轮
auto:只有溢出了才会有滚轮
运行结果:
hidden:
scroll:
auto:
七.外边距问题-合并现象
margin合并问题:
场景:垂直排列的兄弟元素,上下margin会合并
现象:取两个margin最大的值生效
上面那个div的外边距20px而下面的div外边距30px,垂直合并,之间的间距只会保留更大的30px
运行结果
塌陷问题:
塌陷的原因： 两个相互嵌套的盒子，给内部的盒子
设置外边距，会把父元素拉下来
解决办法：
1.取消子子级得margin给父元素加padding进行设置(给父元素设置box-sizing)
2.给父元素加哦overflow：hidden
运行结果:
八.行内元素-内外边距的问题
行内元素
场景：行内元素添加margin和padding，
无法改变元素垂直位置水平方向是会生效的
解决办法：
给行内元素添加 line-height，可以改变垂直位置
运行结果:
九.盒子模型-圆角
作用:设置元素外边框的圆角
boder-radius:属性值
属性值:数字+px / 百分比
ps:属性值指定的是圆角半径
运行结果:
设置一个圆形:
1.形状要求是一个正方形,圆角属性值设置为长宽的一半,或者50%
设置一个胶囊形
1…形状要求是一个长方形
2.border-radius值设置为高度的一半
运行结果:
十.盒子的过渡属性
transition:就是使得某个操作能够有延迟效果,一般配合hover使用
第一个属性all 全部属性
第二个值代表过渡的时间，单位是s
运行结果:
十一.盒子模型 - 阴影
属性名 box-shadow
十二.透明度
属性名 opacity
设置整个元的透明度(包含背景和内容)
rgba中的a只能设置背景的透明度而对内容无效
0完全透明 1不透明
0-1之间的小数是半透明状态
十三.总结
本章主要学习盒子模型的一些操作,内外边距,绘制圆形,胶囊形状的盒子,盒子模型的一些塌陷问题,margin的合并问题,以及详细的解决这些问题的方法