HTML学习之四CSS盒子

CSS盒子模型

Content, padding(内补丁), border; margin（外补丁）;

计算宽度，左右内外边界，左右内外边框，内容，左右内外边距。

如果上下左右四个参数，顺序：上右下左，依次写出padding: 0,0,0,0; 两个值：上下左右；

三个值：上左右下。没有值的去对面找。

Padding-left, top, right, bottom.

使用外边距时注意浏览器兼容性。

除了值为0的情况，其他所有值后面都要是像素为单位，加px。

基本上所有网站，都把padding 和margin设为0. 因为各浏览器都设置了内外边距的不同默认值。所以为了兼容性，将所有内外边距都设为0. 或都从0开始。

所以用到哪些元素，就把那些元素的默认值归零。用到哪些HTML元素，就重置他们的边距。因为他们有自己默认的边距，要控制它，就重置。

CSS模型主要通过盒子模型实现。

内容：width, height

边框：margin, padding.

继承性，有的继承，有的不能继承。

列表，符号都存在兼容性问题，所以：ul, ol {list-style:none;}都设为无。

边框border属性：border-width ； border-style ； border-color。

如果只写border，那就直接跟着三个值。

单独控制一条边：border-top。顺序一样。

margin:100px auto; 左右水平居中。

文字垂直居中： height:50px;

line-height:50px;

CSS元素分类，块状，内联（行内）。

块状：改变：{display:block}。可以容纳内联元素和其他元素。但是排斥同一行内的其他元素。内敛元素中能容纳文本或者其他内联元素，但是宽高不起作用。

Display设置对象如何显示。

可以将某个元素从内联改为block。用display。都有默认值，有的是inline,有的是block。

背景：background:颜色图片平铺方式（重复）固定方式位置

图片默认：水平、垂直平铺。默认左上角显示。

background-color:gold;

background-image:url(../pic/bupt.jpg);

background-repeat:no-repeat; 不让它平铺。

background-position:right bottom; 设定位置。

background-position:50px 30px; 横坐标，纵坐标。

background-attachment:fixed;/scroll；背景图片是否随着背景滚动。依附方式。将图片固定在屏幕某个地方，而不是盒子某个地方。

Ie6只有HTML 和body支持这个属性。

图片的翻转效果：两张大小相同，内容不同，正常显示一张。鼠标经过显示另一张。

CSS精灵技巧，为了减少http请求。将两个颜色不同的内容一样的图片合为一张图片，调整其位置。

Div+css页面布局。

1. 默认。Html结构顺序。

2. 浮动属性：float:center；

3. 定位。屏幕某个位置。

#two {background:green;position:absolute；

top:50px; left: 150px;}

浮动：取消元素的霸道属性（独占一行！）后面的元素将视其不存在。只有两个：要么left要么right。

飘到父元素边界。

浮动的元素相当于消失了，原来霸占的地方就空了。后面的元素补充。存在浏览器兼容性。

浮动布局几个图片：飘起来啦！

#p1 {float:left; margin:30px;}

#p2 {float:left;margin:30px;}

#p3 {float:left;margin:30px;}

#p4 {float:left;margin:30px;}

有的兼容，有的不兼容，就可能挡住了，看不到了。

清楚浮动：虽然前面的没有了，但是后面的不要占据人家的位置，仍然在自己的地方。

不允许其哪个方向有浮动。Clear：none/left/right/both

clear:both;保证不随浏览器大小改变，浮动元素相对位置改变。

常见博客，网页等布局。

#head {background:red;height:100px; }

#left {background:green;float:right;width:400px;height:300px;float:left;clear:left;}

#right {background:blue;width:200px;height:200px; clear:left;float:right;}

#foot {background:gold;height:200px; clear:left;height:50px;clear:both;}

#header {margin:0 auto;}默认铺满。设定宽度后，则居中。

如果让同一行的两个盒子居中，那么在外面加一个大盒子，一定要有宽度，否则默认全屏幕。

同一行的浮动同方向。

清除浮动的方法：主要对后面元素的影响。但是对父元素也会有影响。

当父元素没有指定高度是，它的子元素有浮动，其父元素的高度不会增加。

1. 额外标签法。在最底下加一个空盒子（没有内容）。<div class=""clear;> </div>强迫容器能够容纳所有浮动元素。

2. Overflow：auto。根据子元素的需要增加宽度。Hidden:切除多余部分。Scroll显示滚动条。但是如果子元素出现定位，那就有问题了。

上述两种方法：等价表示：1.在大盒子最底下：<div class="clear"> </div>

2.在大盒子定义中：overflow:hidden。

效果相同。

注意：想要使用绝对定位时，要有两个条件：

1. 必须给父元素加定位属性，position:relative。

2. 给子元素加绝对定位: position：absolute。

3. 利用伪对象，after。

HTML学习之四CSS盒子相关推荐

html css盒子顶层,HTML学习之四CSS盒子
CSS盒子模型 Content, padding(内补丁), border; margin(外补丁); 计算宽度,左右内外边界,左右内外边框,内容,左右内外边距. 如果上下左右四个参数,顺序:上右下左 ...
CSS基础学习-8.CSS盒子模型_标准盒子9.CSS怪异盒子
怪异盒模型 box-sizing:content-box;/*正常盒模型,默认值*/ box-sizing:border-box:/*怪异盒模型,固定了盒子的大小,无论是否添加内边距还是边框,盒子的大 ...
css盒子样式有哪些,css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
【温故知新】CSS学习笔记（盒子边框介绍）
CSS盒子边框 CSS中其实就三个大模块:盒子模型.浮动.定位. 其中所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个装内容的容器,每个矩形都由元素的内容.内边距(padding ...
从零开始学前端：CSS盒子模型属性 --- 今天你学习了吗？（CSS：Day14）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:伪元素和盒子模型 - 今天你学习了吗?(Day13) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
CSS学习（第三天）（层叠性、继承性、优先级，CSS 盒子模型）
紧接第二天 CSS学习第三天 5 CSS的三大特性 5.1 层叠性 5.2 继承性 5.2.1 行高的继承 5.3 优先级 5.3.1 优先级(注意) 5.3.2 优先级(权重叠加) 6 CSS 盒子 ...
【温故知新】CSS学习笔记（盒子水平居中方法）
CSS盒子水平居中比如有一个DIV盒子,如果不给任何样式,默认的宽度是和浏览器一样宽的(如下图所示). 那么若要让盒子里面的内容居中对齐,我们可以设定如下样式: div { text-align: ...
【温故知新】CSS学习笔记（盒子内边距介绍）
CSS盒子内边距这一节我们开始介绍内边距(Padding). 内边距(Padding)属性用于设置内边距,内边距是指边框与显示内容之间的距离. [例子] 默认情况下边框和内容紧挨着的: 这里我们设置 ...
CSS盒子模型-小白学习中
CSS盒子模型一.盒子模型的概念一个独立的盒子模型由内容.边框(border).内边距(padding)和外边距(margin)4部分组成. 1.border是设定边框线条,盒子的其他部分是相对b ...

HTML学习之四CSS盒子

HTML学习之四CSS盒子相关推荐

最新文章

热门文章