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