HTML+CSS基础学习笔记2

一.

盒模型:

垂直的相邻外边距会重叠只取最大值

子元素设置margin 和父元素相邻会给父元素

让父元素不被传递 则可以给父元素设置一个边框或内边距

二.

浏览器默认样式:  margin padding

内联元素盒模型:

1.不能设置宽高

2.可以水平垂直内边距 不会影响布局

3.可以设置边框 

4.可以设置水平外边距 相邻两个不重叠 

display:

1.内联元素变成块元素:block

2.将一个元素作为内联元素:inline

3.将一个元素设置为行内块元素:inline-block

4.隐藏元素:none

visibility:

1.设置元素是否可见 visible是(默认) hidden不显示

2.消失后占据位置

四.

overflow:

处理溢出的类容

1.Visible 默认 不做处理

2.hidden 溢出内容被剪切不会被显示

3.scroll 以滚动条显示溢出

4.auto 根据需要添加滚动条

五.

文档流:

处于页面最底层的位置

元素在文档流的特点:

1.块元素独占一行 自上而下排列

2.块元素宽带默认100%

3.块元素的高度默认

4.内联元素依次排列 默认被类容撑开

 六

浮动:floa

1.元素立即脱离文档流 它下边的元素会向上移动

2.元素浮动后会向页面左上或右上漂浮 直到遇到父元素或者其他浮动元素

3.浮动元素上边是一个没有浮动的块元素 则浮动元素不会超过块元素

4.浮动元素不会发生越位上一个元素

七.

浮动:floa

1. 浮动元素不会盖住文字

2.块元素脱离文档流后 高度和宽度会被内容撑开

3.内联元素脱离文档流后会变成块元素

八.

高度塌陷问题:

为了子元素浮动会导致父元素高度塌陷:

1.将父元素高度定义值,但是父元素

解决高度塌陷问题:

2.页面元素隐含属性 BFC 该属性可以设置打开或者关闭  默认关闭,开启后元素会:

1.父元素的外边距不会和子元素外边距重叠

2.开启BFC的元素不会被浮动元素覆盖

3.父元素开启BFC 可以包含浮动的子元素

 

如何开启BFC:

1.设置元素浮动 会导致宽度丢失

2.设置元素绝对定位

3.设置元素inline-block

4.将元素的overflow设置非visible的值(outo)IE6及以下不支持  IE6有另一个隐藏属性叫hasLayout,开启方法:直接设置元素zoom为1

 

解决高度塌陷的最终方案:

1.clear:清除其他元素对当前元素的影响

属性值:left right both(两侧)

 

父子元素解决方案:

1.添加一个块元素设置clear

2..clearfix:after{content“”

display:block;

clear:both;}

九.

导航条:

1.text-decoration: none;取消链接下划线

2.list-style:none; 取消无序列表前面的序号

信息栏:

1.文字行高和父元素的高度一致 垂直居中

十.

相对定位:

position 可选值:

1.static 默认 不开启

2.relative 开启元素相对定位

3.absolute 开启绝对定位

4.fixed 开启元素固定定位

开启元素定位后:

1.相对于元素的原来位置进行定位

2.不会脱离文档流

3使元素提升一个层级

4.不会改变元素性质 块还是快 内联还是内联

绝对定位

position:absolute

开启后:

1.会使元素脱离文档流

2.绝对定位相对于离他最近的祖先元素定位

3.绝对定位会使元素提升一个层级

4.绝对定位会改变元素性质 内联元素会改变为块元素

固定定位:

position:fixed

1.和绝对定位一样

2.不同的是:固定定位是相对于浏览器位置定位 

3.固定在浏览器窗口位置 不会随着滚动条移动

4.IE6不支持

 十一.

层级显示:

1.同层级下 后面的元素会盖住前面的

2.通过z-index属性可以修改层级

3.z-index指定一个数值 该值越层级越高

4.对于没有开启定位的元素不能开启z-index

5.父元素层级不会盖住子元素

十二

opacity 透明元素

1.可以设置元素透明

2.0~1取值

3.在IE8以下的浏览器中不支持 需要使用filter:aloha(opacity=透明度 取值0-100)

 十三

背景图片:

background-repeat:repea 左右平铺

backguround-repeat:no-repeat 不平铺

repeat-x 沿着x轴平铺

十四

 

background-position:两个值指定一个背景图片位置

1.设置便宜量 水平 和垂直

2.left top...组合

3.

background-attachment:fixed

1.永远相对于浏览器 不会随着滚动条移动

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值