004 Python前端之CSS盒模型
来源:互联网 发布:java 查看classpath 编辑:程序博客网 时间:2024/05/24 00:37
标准盒模型
- 最外层margin
- 中间border
- 内层padding
- 最内层width + height
padding属性
Padding是设定页面中一个元素内容到元素的边框之间的距离。 也称补白用法:1)用来调整内容(子元素)在容器(父元素)中的位置关系2)用来调整子元素在父元素中的位置关系。 注:padding属性需要添加在父元素上。3)padding值是额外加在元素原有大小之上的,如想保证元素大小不变,需从元素宽或高上减掉添加的padding值大小。Padding属性值的四种方式四个值:上 右 下 左 {padding:10px 20px 30px 40px;}三个值:上 左右 下 {padding:10px 20px 30px ;}二个值:上下 左右 {padding:10px 20px ;}一个值:四个方向 padding:2px;/*定义元素四周填充为2px*/可单独设置某一方向填充 上方向padding-top:10px; 右方向pahdding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;注意:padding值不允许是负值padding区域在border与content之间;背景色和背景图像会覆盖padding和content组成的区域;
margin外边界
边界:margin,在元素外边的空白区域,被称为边距。属性值的4种方式: 四个值:上 右 下 左 {margin:10px 2px 4px 3px ;} 三个值:上 左右 下 {margin:2px 4px 6px;} 二个值:上下 左右 {margin:2px 4px;} 一个值: 四个方向 {margin:2px;}可单独设置某一方向填充上方向margin-top:10px;右方向margin-right:10px;下方向margin-bottom:10px;左方向margin-left:10px;
border属性
border的使用方法:复合写法:border:边框宽度 边框风格 边框颜色; 例如:border:5px solid #f00;网页中很多修饰性线条都是由边框来实现的。 边框三类属性:边框宽度:border-width:边框颜色:border-color:边框样式:border-style:solid(实线)/dashed(虚线)dotted(点划线)/none; * 可单独设置一方向边框,盒模型:Border的设置1、border:dashed/solid/dotted/double(默认的边框宽度为中等(大约3px和4px之间),默认的颜色为文字的颜色)2、border-width:10px;(设置一个值时:四方向)3、border-width:5px 10px(设置两个时:第一个值的是上下、第二个值是左右)4、border-width:4px 10px 20px(设置三个值时:第一个值上,第二个值是左右,第三个指下;)5、border-width:10px 5px 7px 8px ;(分别设置四个方向的边框宽度;)
盒子大小的计算
盒子实际占有宽度区域=margin-left + border-left + padding-left+width+padding-right+border-right+margin-right盒子实际占有高度的区域=margin-top + border-top + padding-top + height + padding-bottom+ border-bottom + margin-bottom
文本属性
容器溢出
{overflow: visible/hidden/scroll}visible:默认值,内容不会被修剪,会呈现在元素框之外;hidden:内容会被修剪,并且其余内容是不可见的;scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;
文本溢出
{text-overflow: clip / ellipsis;}取值:clip:不显示省略号(...),而是简单的裁切;ellipsis:当对象内文本溢出时,显示省略标记;
省略号设置
text-overflow属性仅是:当文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:1、容器宽度:width:value;(px、%,都可以)2、强制文本在一行内显示:white-space:nowrap;3、溢出内容为隐藏:overflow:hidden;4、溢出文本显示省略号:text-overflow:ellipsis; 注:必须是单行文本才能设置本文溢出!!!
怪异盒模型
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素content-box这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。border-box为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。举例盒模型尺寸基准有两种,分别是默认的content-box和border-box默认情况下我们代码中元素的是以content-box作为标准的盒子content-box和border-box的主要区别是二者的盒子的宽度是否包含元素的边框和内边距。html<div id="box1" class="box"></div><div id="box2" class="box"></div>css.box{width:100px;height:100px;background:red;border:5px solid yellow;padding:10px}#box1{box-sizing:content-box}#box2{box-sizing:border-box}
阅读全文
0 0
- 004 Python前端之CSS盒模型
- 前端开发之css盒模型
- 前端知识整理之CSS盒模型
- 前端面试题之CSS盒模型
- 前端开发之CSS布局模型
- python自动化之路-前端css
- 002 Python前端之CSS基础
- CSS之盒模型
- css布局之盒模型
- HTML+CSS之CSS盒模型 (8)
- HTML+CSS之CSS盒模型
- HTML+CSS之CSS盒模型 (8)
- python之 前端HTML/CSS基础知识学习笔记
- 003 Python前端之CSS核心属性与浮动
- [前端] 返回元素节点的CSS盒状模型信息
- 前端之css
- 前端基础之CSS
- 前端之css-flex
- 通过io读取 因为是二进制所以返回hashCode的值 hashCode通过转化成char返回字符
- Java开发需要知道的一些Linux命令
- HDU-6129 Just do it
- java鬼混笔记:Hibernate:2、一对一关系之主键单向和双向关联
- 图的深度优先遍历
- 004 Python前端之CSS盒模型
- csdn实现转载功能
- python 获取b站视频地址
- 朴素贝叶斯算法
- E304
- opencv入门电子书 《Practical Python and OpenCV+ Case Studies》2版和三版电子书
- 第001节
- Android Things入门-设置本地时区
- const volatile 同时修饰一个变量