02.详解盒子模型&选择器初识

Posted huadaxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了02.详解盒子模型&选择器初识相关的知识,希望对你有一定的参考价值。

1.Div盒子

技术图片技术图片

技术图片

技术图片技术图片

用div做圆

技术图片

技术图片能否优化,去掉div之间的距离?margin属性

?

用表格做圆

技术图片技术图片

?

2.CSS样式

技术图片

技术图片

技术图片总结:需要注意的是行级标签设置宽高不会生效

?

小练习:使用span标签

技术图片

技术图片

技术图片

?

3.CSS选择器演示及其优先级

技术图片

技术图片技术图片

体现在诗的第二句和第三句中

?

4.ul列表样式案例

技术图片技术图片这个指的是标志(不严谨)

技术图片

技术图片

?

5.border及其属性

技术图片

技术图片技术图片

技术图片

?

小练习:table

技术图片

技术图片

border-collapse: collapse;/*合并线宽:默认是分离的separate*/重点

技术图片

技术图片

?

小练习:

技术图片

技术图片技术图片

技术图片技术图片

技术图片

改一下

技术图片技术图片

?

?

以上是关于02.详解盒子模型&选择器初识的主要内容,如果未能解决你的问题,请参考以下文章

CSS小技能:常用样式属性选择器分类盒子模型

CSS3--Flex弹性盒子布局:使用弹性盒子模型布局微信客户端

前端2css:选择器,盒子模型,注册页面

CSS修改属性,盒子模型,浮动

CSS3--Flex弹性盒子布局: 声明弹性盒子 & 容器的属性

关于盒模型的 盒子模型 浮动 定位以及高级选择器的使用