2017-9-26 html模型及居中方法
来源:互联网 发布:冥王星的早餐知乎 编辑:程序博客网 时间:2024/06/05 01:06
title: 2017-9-26 html模型及居中方法
date: 2017-09-26 18:07:38
tags: [HTML5,CSS3]
grammar_cjkRuby: true
欢迎访问我的个人博客 永无岛的个人博客
HTML模型
盒模型
盒模型可以想象成一个包装的月饼,包装(div),内容(月饼),月饼和包装盒间的距离(padding),两个包装的月饼之间距离(margin),块级元素都具有盒模型的特征。
块级元素
在html中div、 p、h1、form、ul 就是块级元素。设置display:block就是将元素显示为块级元素。
块级元素的特点:
- 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
如何将内联元素转块级元素?
a{display:block;}
内联元素
在html中,span>、a、label、strong和em就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素
内联元素的特点:
和其他元素都在一行上;
元素的高度、宽度及顶部和底部边距不可设置;
元素的宽度就是它包含的文字或图片的宽度,不可改变。
如何将块级元素转内联元素?
div{display:inline;}
内联块级元素
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,img、input就是内联块级元素
内联块级元素的特点:
- 和其他元素都在一行上;
- 元素的高度、宽度、行高以及顶和底边距都可设置。
如何将一个其他元素转内联块级元素?
div{display:inline-block;}
盒模型的边框
p{border:1px solid red;}p { border-style:dotted; border-color:#ccc; border-width:1px;}
盒模型高度和宽度
- IE盒模型
盒模型总宽度=margin+width
width=border+padding+content
- 标准盒模型
盒模型总宽度=margin+border+padding+width
width=content
- 解决方案
W3C 最后为了解决这个问题,在 CSS3 中加了 box-sizing 这个属性。当我们设置 box-sizing: border-box; 时,border 和 padding 就被包含在了宽高之内,所以,为了避免你同一份 css 在不同浏览器下表现不同,最好加上:
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
布局模型
布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了。
流动模型(Flow)
流动模型是浏览器默认的布局模式,具备两个特征
1. 块状元素以自上而下的方式布局
2. 内联元素以从左自右的方式布局
浮动模型(Float)
如果现在我们想让两个块状元素并排显示,可以使用浮动模型。
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>浮动模型</title> <style type="text/css"> div{ border: 2px red solid; width: 200px; height: 200px; } .div1, .div2 { float: left; margin-right: 10px; } .div3 { width:414px; /*414=2(div1的border-left)+200(div1的width)+2(div1的border-right)+10(div1的margin-right)+2(div2的border-left)+200(div2的width)+2(div2的border-right)-4(div3的border-left+border-right)*/ margin-top:2px; } </style></head><body> <div class="div1">栏目1</div> <div class="div2">栏目2</div> <p style="clear:both;margin:0px; height:1px;"></p> <div class="div3">栏目3</div></body></html>
margin collapse 边界塌陷或者说边界重叠
==设置 clear 非 none 的元素的 margin-top 是否生效,主要取决于这个 margin-top 能否推动该元素越过所有 float 元素的height==
==解决浮动后因clear:both;导致其后元素使用margin失效最有效的办法是:==
不要把clear和其他样式混用,重新定一个标签清除浮动,如上代码中的p标签
层模型(Layer)
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作
层模型有三种形式:
- 绝对定位(position: absolute)
- 相对定位(position: relative)
固定定位(position: fixed)
- absolute:表里如一,移动了就是移动了。
- relative: 只是表面显示移动了,但实际还在文档流中原有位置,别的元素无法占据。
居中技巧
水平居中
行内元素水平居中
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。
.txtCenter{ text-align:center;}<div class="txtCenter">我想要在父容器中水平居中显示。</div>
定宽块状元素水平居中
当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。定宽块状元素:块状元素的宽度width为固定值。
<body> <div>我是定宽块状元素,哈哈,我要水平居中显示。</div></body><style>div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}
不定宽块状元素水平居中
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性
- 加入 table 标签
- 设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
- 设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的
加入 table 标签
<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table></div><style>table{ border:1px solid; margin:0 auto;}</style>
设置inline
<style> a { text-decoration:none; } .container { text-align:center; } ul { list-style:none; display:inline; margin:0px; padding:0px; } .container li { display:inline-block; width:30px; height:30px; border:1px solid red; line-height:30px; } </style><body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div></body>
使用position:relative居中
<style> a { text-decoration: none; } .container li { text-align: center; display: inline-block; min-width: 30px; height: 30px; border: 1px solid red; line-height: 30px; } /*第一步:将父元素,div的左边线与浏览器的中分线对齐。一定要设置左浮动*/ .container { float:left; position: relative; left: 50%; } /*第二步:将ul相对父元素div往左移动-50%,就是将ul的中分线和div的左边线对齐*/ ul { list-style: none; margin: 0px; padding: 0px; position:relative; left:-50%; } </style><body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div></body>
垂直居中
单行高度居中
<div class="container"> hi,imooc!</div<style>.container{ height:100px; line-height:100px; background:#999;}</style>
多行高度居中
- 可以借用table
- 设置display:table-cell;
借用table实现高度居中
使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
<style> .container { height: 500px; width: 500px; background: #999; } .container table { margin: 0 auto; } .container table td { height: 500px; }</style><body> <div class="container"> <table> <tr> <td> <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="" /> </td> </tr> </table> </div></body>
设置display:table-cell实现高度居中
<style> .container { height: 500px; width:500px; background: #999; display: table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ text-align:center;/*img是内联块状元素,使用text-align进行水平居中*/ } </style></head><body> <div class="container"> <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="" /> </div></body>
- 2017-9-26 html模型及居中方法
- 论html的居中方法
- HTML居中方法的尝试
- html元素居中的方法
- html + css 居中方法大全
- html css 元素居中的方法
- HTML元素居中显示的方法
- HTML元素水平居中方法详解
- html中盒子上下左右居中方法汇总
- html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法
- html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- 图片水平及垂直居中方法
- CSS水平居中元素方法及反思
- html和js图片上下居中的两种方法
- html css+div 万能的position居中方法
- html元素垂直居中的几种方法
- loadrunner Web_类函数之web_text_area()
- 抓包分析MSS/MTU
- AS的gradle各版本下载地址
- 神经网络Version2
- arm-none-linux-gnueabi-gcc 下载地址
- 2017-9-26 html模型及居中方法
- 并查集 leetcode 编程题
- Android自定义Dialog--DanmakuFlame弹幕发送框界面的实现
- [总结]----Sqoop 几种导入导出模式
- java基础补充
- 数据结构-线性表
- Java 注解(Annotation)的简介与使用实例
- schema实现对xml的约束
- 局域网中PC访问VMware虚拟机中的Ubuntu