CSS总结三（前端一）

Day7

1.css书写顺序

布局定位属性 display position float overflow clear visibility

自身属性 width height margin padding border background

文本属性 color font text-decoration/align

其他属性 border-radius box-shadow content

2.布局流程

版行（可视区）据每行行行罗列制作html结构！用盒子模型开始

附练习代码：

CSS总结三（前端一）

<!doctype html>

湖人中文门户网站

search…

R.I.P for kobe_bryant

历史球星

查看更多>>>

湖人113：103雄鹿

--2020.03.07

湖人113：103雄鹿

--2020.03.07

湖人113：103雄鹿

--2020.03.07

湖人113：103雄鹿

--2020.03.07

湖人113：103雄鹿

--2020.03.07

湖人113：103雄鹿

--2020.03.07

湖人113：103雄鹿

--2020.03.07

湖人113：103雄鹿

--2020.03.07

湖人113：103雄鹿

--2020.03.07

湖人113：103雄鹿

--2020.03.07

移动端信息 :

湖人队官方微博

湖人队微信公众号

湖人队twiter

湖人队youtube

湖人队facebook

最新信息 :

湖人队就职机会

湖人队社区行动

湖人队中国行

湖人队夏季联赛

进入NBA.com/China后，即表示阁下同意遵守NBA.com/China的隐私政策和使用条款。

有任何的建议和意见，都欢迎联络我们：[email protected]

有关NBA商品授权合作事宜，敬请联系:[email protected]

返回顶部

Day8

3.定位=定位模式+边偏移（top,left,right,bottom后跟px）

4.定位模式

选择器{position:属性}

static 静态定位（相当于无定位，一般不用）

relative 相对定位（相对于原来的定位，一般用于父类）

absolute绝对定位（相对于原来定位但其余盒子不占用原来位置，一般用于子类）

fixed 固定定位（不随滚动条滚动而滚动）

注意：一般‘子绝父相’来进行定位！

5.子类的absolute定位不能用margin：auto来使文字居中

6.堆叠顺序

后来者居上

z-index：正整数无单位，数值越大边框越靠上（只用于定位）

7.①display使盒子不给宽度，宽度默认为内容宽度

②定位的盒子要写width:100%才可实现text-align:center

③浮动元素和绝对定位不会触发外边距合并问题

8.圆角矩形设置

比如：右上角border-top-right-radius : xpx;

连写 border-radius: 左上右上右下左下；

9.！标准流，浮动，定位区别：

标准流用上下排列盒子

平铺用浮动

块中块（叠压）用定位

附练习代码：

<!doctype html>

淘宝首页大图