美文网首页
02. CSS基础

02. CSS基础

作者: ErikYu | 来源:发表于2017-02-24 13:47 被阅读0次

2.5 浮动布局


2.5.1 浮动导致的布局变动

  1. 对于块级元素来讲,在不设置宽度的情况下,默认的宽度是100%;一旦设置了浮动,他的宽度就会根据内容进行自动调整
  2. 设置了浮动的元素会脱离正常的文档流;例如,默认情况下父元素的高度会根据子元素的内容进行调整,如果将子元素设置为浮动后,父元素的高度就会变为0
  3. 虽然浮动元素脱离了文档流,但是里面的内容仍然占据空间,会根据相对位置进行布局;

2.5.2 清除浮动

  1. clear属性
.clear{
    clear: both; /*左右两侧都不允许出现浮动元素*/
}
  1. 父元素使用:after伪类
.clearfix:after{
    clear: both; /*左右两侧都不允许出现浮动元素*/
}

2.6 CSS定位


position属性有五个值:static, relative, absolute, fixed, inherit;

2.6.1 相对定位---position: relative/static;

相对于其他元素进行定位,区别在于static不能控制位移,relative可以;

注意:脱离了文档流的元素,例如设置了浮动和绝对定位的元素不会对相对定位产生任何影响。

  1. static,默认值

在使用static的情况下,top、right、left、bottom、z-index都不会生效。

  1. relative

表现与static一样,只是可以通过设置top、right、left、bottom、z-index控制位置。

2.6.2 绝对定位

绝对定位的几个特点:

  • 块级元素的宽度在未定义时不再为100%,根据内容自动调整,类似于设置了浮动。
  • 脱离正常的的文档流。
  • 在不定义z-index的情况下,absolute元素会覆盖在其他元素之上。
  1. absolute

相对于上一个不是static的父元素进行绝对定位,如果不指定父元素的position,absolute将会相对于整个html文档进行绝对定位;

  1. fixed

相对于浏览器窗口进行定位;
ie6,ie7不支持fixed属性,兼容性方案:

相关文章

  • 02. CSS基础

    2.5 浮动布局 2.5.1 浮动导致的布局变动 对于块级元素来讲,在不设置宽度的情况下,默认的宽度是100%;一...

  • Day02 HTML和CSS

    01.表单标签 02.下拉、多行文本、按钮 03.div和span 04.CSS基础 05.选择器 06.伪类选择...

  • CSS学习资源

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • 【2016年特别福利】史上最全CSS学习资料大全

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • react学习路线图

    基础 HTML学习 HTML 基础学习 HTML 基础CSS学习 CSS 基础在上一步练习的基础上为页面添加样式使...

  • CSS初识

    CSS基础

  • 02.基础类型

    基础类型 布尔类型 定义方式 数值类型 定义方式 字符串类型 定义方式 数组 定义方式1: 定义方式2: 定义方式...

  • css大纲

    css 基础 CSS 简介 在 html 中使用 css link 和 @import CSS 选择器 CSS 优...

  • CSS第一小节第一天

    CSS基础入门 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) CSS通常...

  • CSS第一天

    CSS 什么是CSS 为什么要学习CSS CSS基础语法 CSS使用方法 CSS选择器 CSS继承和层叠 CSS优...

网友评论

      本文标题:02. CSS基础

      本文链接:https://www.haomeiwen.com/subject/gclwwttx.html