__x__(20)0907第四天__ css 框模型

CSS处理元素,把每个元素都包含在一个盒子里。

对网页的布局,其实就是对盒子的摆放及设置。



 边框border,会使盒子变大:

.box{
    border: 10px 20px 30px 40px red solid;
}

.box{
    border-width: 10px 20px 30px 40px;
    border-color: red;
    border-style: solid;
}

border-top-xxx:

border-right-xxx:

border-bottom-xxx:

border-left-xxx:

border-style:

none;    默认无边框

solid;    直线框

dotted;    点状框

dashed;    虚线框

double;    双线框

groove;    以下效果取决于bordr-color

ridge;

inset;

outset;

inhert;继承



 内边距padding,会使盒子变大,会受background-color的影响

padding: 100px 200px 300px 400px;

相当于

padding-top: 100px;

padding-right: 200px;

padding-bottom: 300px;

padding-left: 400px;



 外边距margin,不会影响可见框的大小,只会影响盒子的位置。。。left和top影响自己的位置,right和bottom影响其他元素的位置

margin: 200px;

相当于

margin-top: 200px;

margin-right: 200px;

margin-bottom: 200px;

margin-left: 200px;

注意:

可以是负值,即向反方向移动。

margin-left:auto;    在父元素中居右

margin-right:auto;    在父元素中居左

原文地址:https://www.cnblogs.com/tianxiaxuange/p/9606448.html

时间: 2024-11-05 17:25:59

__x__(20)0907第四天__ css 框模型的相关文章

__x__(22)0907第四天__ 垂直外边距重叠

外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外边距重叠 垂直相邻的两个div,上面的div设置了margin-bootom,遇到下面div设置的margin-top,会发生重叠,产生一个较大的外边距 2. 父子元素 垂直外边距重合 父子元素div时,为子元素div设置上边距时,两个div都会发生向下偏移,此时父子元素的外边距重叠. 当一个元素包

关于CSS框模型及定位的概念

一.CSS框模型(box model)包含了边框(boder).外边距(margin).内边距(padding).宽(width).高(height).元素(element).背景应用于由内容.边框.内边距组成的区域.单边内边距的属性有四个,分别设有上.右.下.左内边距:padding —top   padding—right  padding—bottom  padding—left. 内边距数值可以是阿拉伯数字(单位厘米),也可以是百分比数值.边框的样式在boder—style中设置,可以定

CSS 框模型

1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.外边距和边框的方式. 如左下图表示元素内容.内边距.外边距和边框四者关系 2.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 在 CSS 中,width 和 height 指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸. 假设框的每个边上有 10 个

CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式.这可以分别进行,也可以使用通用选择

CSS框模型,浮动,定位以及其他属性

1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式 element : 元素. padding : 内边距,也有资料将其翻译为填充. border : 边框. margin : 外边距,也有资料将其翻译为空白或空白边. 围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”.设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. * { margin: 0; padding: 0;}

CSS 框模型概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边框组成的区域. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖

CSS 框模型(Box Model)

CSS 框模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 下面的图片说明了框模型(Box Model): 不同部分的说明: Margin - 清除边框区域.Margin没有背景颜色,它是完全透明 Border - 边框周围的填充和内容.边框是受到盒子的背景颜

css框模型及position属性

css框模型:1.padding  内边距   数值.百分比    不接受负值 2.margin  外边距    数值.百分比    可以接受负值 例:  padding:50px(上)   50px(左右)    50px (下)  50px(上下) 50px (左右) 50px (上)  50px (右)50px (下)50px (左) display:inline  块级元素转为行内元素 block   行内元素转为块级元素  inline—block  行内块元素 display:non

CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http://www.cnblogs.com/hh54188/archive/2010/12/28/1919078.html,此外,对于如何计算父元素的width和height,该文章也说明了~ CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框