css盒模型。边框和内外边距
css盒模型:
外边距 边框 内填充 内容
盒模型分为两种:
标准盒模型:
怪异盒模型(IE盒模型):
边框:border
border: 10px solid blue;表示设置10像素蓝色实线条的边框
是以下三个样式的复合语法
border-width: 10px; 设置边框的宽度
border-color: blue; 设置边框的颜色
border-style: solid; 设置边框的样式
solid:实线
dashed: 虚线 装订线
dotted: 点线
double: 双线
如何单独设置一个边的边框:
border-left:
border-right:
border-top:
border-bottom:
border-radius 设置圆角边框 取值可以是 px % em 最大设置范围到50% 超出则按照50%计算
参数最少可以设置一个 最多可以设置八个
border-radius: 5px 50% 50% 50% / 5px 50% 50% 50%;
前四个值代表水平方向的取值 左上 右上 右下 左下
后四个值代表垂直方向的取值
利用css边框知识 在页面绘制一个三角形:
需要将一个盒子宽高设置为0 然后设置四个边框,其中三个面的边框颜色设置成透明色,则会显示成一个三角形
width: 0px;
height: 0px;
border-left: 200px solid transparent;
border-top: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 200px solid #ff0;
内容: 我们所设置的宽和高 实际上指的是内容区域的宽高 (标准盒模型)
width 宽
height 高
外边距和内填充:
padding 内填充 (内边距/内补白) : 表示一个元素,边框和内容之间的距离
padding: 20px; 如果只给一个值,代表上下左右的内填充同时设置20px
padding: 20px 40px; 如果给两个值 第一个值代表上下 第二个值代表左右
padding: 20px 40px 60px; 三个值 第一个值代表上 第二个值代表左右 第三个之代表下
padding: 20px 40px 60px 80px; 四个值分别对应 上 右 下 左 以顺时针方向赋值
padding-bottom:; 单独设置一边的内填充 可以使用 padding-方向 来设置
margin 外边距(外补白) 表示元素与元素之间的距离,也就是边框以外的距离 设置的值和内填充原理一致
当设置外边距时 如果兄弟元素之间,上下的外边距有重合,则取最大值
去除浏览器默认的所有标签的外边距和内填充
*{
margin: 0;
padding: 0;
}
设置一个盒子在父元素宽度内水平居中
margin:0 auto;
外边距的重合问题:
当子元素和父元素的上外边距重合到一起时,不管给小盒子还是大盒子设置上外边距,影响的都是大盒子,
取值取两者的最大值
盒模型的计算:
标准盒模型 宽度计算: width + paddingleft + paddingright + borderleft + borderright + marginleft + marginright
IE盒模型 宽度计算: width + marginleft + marginright
标准盒模型 设置的 width = 实际内容的宽度
IE盒模型 设置的 width = 实际内容的宽度 + 边框的宽度 + 内填充的宽度
两种盒模型之间的转换:
box-sizing:content-box; 标准
box-sizing:border-box; IE
css盒模型。边框和内外边距的更多相关文章
- css样式之边框和内外边距
1.css样式之边框:border 实心的边框: <!DOCTYPE html><html> <head> <meta http-equiv="co ...
- 0019 盒子模型(CSS重点):边框、内外边距、布局稳定性、PS
typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...
- CSS盒模型以及如何解决边距重叠问题
盒模型有两种,W3C 和IE 盒子模型 W3C定义的盒模型包括margin.border.padding.content,元素的宽度width=content的宽度 IE盒模型与W3C盒模型的唯一区别 ...
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- css内外边距属性
盒子模型: 所有HTML元素可以看作盒子,在CSS中,"box model"是用来设计和布局时 使用. CSS盒模型本质上是一个盒子, 封装周围的HTML元素, 它包括:边距,边框 ...
- css - 盒子内外边距
css - 盒子内外边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{ width:200px; ...
- css关于内外边距的详细解释
贴图吧,图一眼明了. 无效果时候有 只有一个<div>啦啦啦</div> 只有padding时候有: padding详细设计时: 解释:padding是对内的,如padding ...
- CSS盒模型
CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...
随机推荐
- JAVA:使用栈实现一个队列
使用栈实现一个队列,需要弄清楚栈和队列的区别: 栈:先进后出: 队列:先进先出. 实现思路: 1)通过两个栈(pushStack / popStack)对倒,确保 popStack 栈的出栈顺序与队列 ...
- MySql通过数据库文件恢复数据库
以表”Table”为例: 如类型是MyISAM, 数据文件则以”Table.frm””Table.MYD””Table.MYI””三个文件存储于”/data/$databasename/”目录中. 如 ...
- PostgreSQL递归查询示例
PostgreSQL提供了WITH语句,允许你构造用于查询的辅助语句.这些语句通常称为公共表表达式或cte.cte类似于只在查询执行期间存在的临时表. 递归查询是指递归CTE的查询.递归查询在很多情况 ...
- Python使用偏函数与类实现装饰器
# -*- coding: utf-8 -*- # author:baoshan # python对某个对象是否能通过装饰器形式使用只有一个要求:decorator必须是一个可被调用的对象. # 我们 ...
- SQL多个逗号分开的字段值 取对应的数据名称信息
字段值 函数实现: )) ) as begin set @strs=','+@strs+',' ) ) set @str2='' declare SyncOrderCursor cursor for ...
- LODOP中打印项水平居中简短问答
相关博文:LODOP打印项水平居中(超文本纯文本居中)LODOP打印超文本有边距不居中的情况2(超文本居中的一种) LODOP表格水平居中3(宽度为百分比)(超文本居中的一种) LODOP打印图片水平 ...
- 使用命令行操控vmware--安装
在虚拟化出现之前,服务器的使用率很低,一般只有15%-20%,其余的资源处于闲置状态,但vmware出现之后,首先,可以充分的利用资源,从而达到节约成本的目的,其次,使得虚机便于维护.一般小型公司使用 ...
- 五、Snapman多人协作电子表格之——Python脚本
Snapman多人协作电子表格是一个即时工作系统. Snapman中嵌入了Python脚本进行数据处理. 一.Snapman集合python语言介绍 将单元格设置为python脚本的方法:用Snapm ...
- zookeeper学习整理
概述 zookeeper是一个高可用的分布式数据管理与协调框架,基于ZAB算法实现,主要解决分布式一致性问题. https://www.cnblogs.com/felixzh/p/5869212.ht ...
- nginx实现tcp负载均衡
1 安装支持库 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel yum install pcre-d ...