1、CSS 盒子模型,2、边框样式,3、CSS 轮廓(outline),
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度,你需要知道的盒模型是如何工作的。
元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
浏览器的兼容性问题
一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
边框样式
边框-单独设置各边
在CSS中,可以指定不同的侧面不同的边框:
实例
p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }
尝试一下 »
上面的例子也可以设置一个单一属性:
实例
border-style:dotted solid;
CSS 轮廓(outline)
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。
浏览器支持
所有浏览器都支持 outline 属性。
注释:如果规定了 !DOCTYPE,则 IE8 支持 outline 属性。
定义和用法
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
注释:轮廓线不会占据空间,也不一定是矩形。
outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性:
- outline-color
- outline-style
- outline-width
所有CSS 轮廓(outline)属性
"CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。
属性 | 说明 | 值 | CSS |
---|---|---|---|
outline | 在一个声明中设置所有的轮廓属性 |
outline-color outline-style outline-width inherit |
2 |
outline-color | 设置轮廓的颜色 |
color-name hex-number rgb-number invert inherit |
2 |
outline-style | 设置轮廓的样式 |
none dotted dashed solid double groove ridge inset outset inherit |
2 |
outline-width |
设置轮廓的宽度 |
thin medium thick length inherit |
1、CSS 盒子模型,2、边框样式,3、CSS 轮廓(outline),相关推荐
- 10 CSS盒子模型+圆角边框+盒子阴影+文字阴影
1. 盒子模型 1.1 看透网页布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容. 网页布局的 ...
- css盒子模型(边框)
一..盒子模型(Box Model)组成 所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器 CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素, ...
- CSS 盒子模型、边框
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- html盒模型中border的写法,【前端】盒子模型的边框样式属性和应用技巧讲解
分割页面中不同的盒子,常常需要给元素设置边框效果.在CSS中边框属性包括边框样式属性(border-style).边框宽度属性(border-width).边框颜色属性(border-color).单 ...
- html盒子圆角属性,CSS盒子模型-圆角边框
CSS3中新增了圆角边框样式,可以将盒子变为圆角. border-radius 用于设置元素的外边框圆角. 语法: border-radius:length; 参数值可以为数值或百分比的形式 如果是正 ...
- css 盒子模型的边框 虚线
注意: 1.border-style(边框样式)常见样式有: dashed(虚线)| dotted(点线)| solid(实线). 2.border-color(边框颜色)中的颜色可设置为十六进制颜色 ...
- css盒子模型输出对联,网页设计基础 CSS盒子模型 第4章 CSS盒子模型_补充案例.doc...
博学谷--让IT教学更简单,让IT学习更有效 PAGE 18 第4章 补充案例 [案例4-1] 顶部导航栏1 一.案例描述 考核知识点 边框的复合属性.背景颜色 练习目标 灵活运用边框的复合属性. 掌 ...
- php表格所有边框实线,css表格怎么添加边框样式?css表格边框样式总结(附完整实例)...
本篇文章主要讲述的就是关于css表格添加边框样式,这里还有关于css表格边框样式的总结,还有css表格边框的完整实例.接下来就让我们一起来看这篇文章吧 首先我们先看看如何利用css来给表格添加边框: ...
- 转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
最新文章
- linux开终端失败,Linux:终端提示符 (prompt) 不如期生效原因
- 【渝粤题库】陕西师范大学210011幼儿园语言教育作业(高起专)
- H5新人福音~零配置搭建现代化的前端工程
- boost::pool
- 实战Spring Boot 2.0系列(一) - 使用Gradle构建Docker镜像
- python 操作微信闪电贷款_16、6个能够让Python程序快如闪电的小技巧
- Android* 操作系统上的应用程序远程调试
- You have an error in your SQL syntax.....for the right syntax to use near 'describe
- 音乐直链php,【原创】百度音乐直链 + 实现方法
- C3P0连接池配置文档
- C++ 信息管理系统
- 嵇少峰:互联网金融草根时代终结
- MySQL 优化---索引实战(三)
- 拒绝反爬虫!教你搞定爬虫验证码
- NVIDIA安装驱动不成功的解决方式
- Python小黄人绘制
- SSM+服装管理系统 毕业设计-附源码080948
- python爬虫scrapy爬取新闻标题及链接_18Python爬虫---CrawlSpider自动爬取新浪新闻网页标题和链接...
- Android蓝牙系统
- 【IntelliJ IDEA】如何安装汉化插件
热门文章
- android AVD 启动时报错
- java单元测试的用法及原因
- cf319.B. Modulo Sum(dp 鸽巢原理 同余模)
- gdb调试core文件
- IE6下a href=#与a href=javascript:void(0);的区别
- C#中如何调用动态链接库DLL
- 二叉排序树求每个结点平衡因子程序
- MongoDB数据库设计中6条重要的经验法则,part 2
- C++ 前置操作符与后置操作符
- JEPLUS之APP自定义插件——JEPLUS软件快速开发平台