css基础布局


HTML页面中布局的方法:

  • float(浮动布局)
  • position(定位布局)
  • 弹性布局 (CSS3)。

    制作页面最常用的是float布局。

元素浮动的特性:

  • 所有的元素都可以浮动
  • 浮动元素脱离文档流,不占据空间,浮动元素碰到包含它的边框或者浮动元素的边框则停留。
  • float能解决标签之间有间隙的问题
  • float 对行内属性标签和块属性标签的影响

float 对行内属性标签的影响

  • float之后能设置width和height属性,并支持margin和padding属性
  • float 对块属性标签的影响
  • 在没有设置宽高的情况下浮动后,内容撑开宽度高度
  • 可以使块属性元素并排排列

float属性

  • float: none;//默认值。对象元素不浮动;
  • float: left;//左浮动;
  • float: right;//右浮动;
  • 浮动元素可能引起的问题
  • 父元素的高度无法被撑开,影响与父级元素同级的元素
  • 与浮动元素同级的非浮动元素会跟随其后
  • 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面的显示结构

    要避免上述问题,我要就需要给元素清除浮动。

清除浮动的方法

1.使用空标签清除浮动

  • .clear:after{content:’’;display:block;clear:both;}

  • 在所有浮动标签后面添加一个伪标签,并定义CSS属性 clear:both

  • 原理:利用clear:both的特性,让父级div能自动获取到高度

  • 浮动清除成功,元素占用空间,父级高度被撑出,先前的布局没有受到影响。

    2.在父级使用overflow属性;

  • 使用overflow:hidden时,浏览器会自动检查浮动区域的高度

  • 使用简单,代码少,浏览器支持好

  • 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏

overflow属性

当内容超出元素框时的设置。

属性值 描述
visible 默认值,超出的内容不会隐藏。
hidden 超出的内容会隐藏。
scroll 显示滚动条。
auto 内容超出时才显示滚动条

position定位

可以把元素固定到页面的任意位置中。

属性值 描述
static 默认值,位置按文档流排列。
relative 相对定位,还没有脱离文档流,相对于文档流位置移动
absolute 绝对定位,脱离文档流,根据定位父级左上角移动。
fixed 相对窗口定位。

元素定位后可通过 “left”、”top”、”right” 以及 “bottom” 属性来定位。

z-index

设置元素的层级顺序,值可以为负

opacity不透明度

opacity设置元素的透明度,设置1是不透明,0是透明。

1
2
3
opacity:0.5;//设置为半透明
//因为opacity不兼容低版本浏览器,需要用到IE的半透明滤镜
filter:alpha(opacity=50);//设置为半透明

a标签的四个伪类

属性值 描述
link 在a标签属性href里面有地址内容的时候执行的样式。
visited 链接地址已被访问过。
hover 当鼠标移动内容上回触发的样式。
active 当鼠标按住的时候。

使用A标签伪类是需要注意顺序问题

1
2
3
4
a:link{color:red;}//1
a:visited{color:red;}//2
a:hover{color:red;}//3
a:active{color:red;}//4