【鸿蒙开发从0到1-day03】

一.结构伪类选择器

选择器                                     说明
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的合并问题,以及详细的解决这些问题的方法