css盒子模型之边框宽度,边框颜色与边框样式
/*
width和height只是设置盒子内容区的大小,而不是盒子的整个大小,
盒子可见框的大小由内容区,内边距和边框共同决定。
*/
.box1 {
/* 设置内容区的宽度为400px */
width: 400px;
/* 设置内容区的高度为400px */
height: 400px;
/* 设置内容区的背景色为green */
background-color: blueviolet;
/* 设置该盒子模型的下方外边距为10px */
margin: 0px 0px 10px;
}
/*
为元素设置边框必须指定三个样式属性:
border-width 表示边框宽度
border-color 表示边框颜色
border-style 表示边框样式
*/
.box2 {
/* 设置边框的宽度为10px,使用border-width可以指定四个边框的宽度,
如果border-width后面跟一个值,则设置的是上,右,下,左(按照顺时针方向)边框的宽度都是该值(四个宽度都一样);
如果border-width后面跟两个值,则分别设置的是上下,左右边框的宽度;
如果border-width后面跟三个值,则分别设置的是上,左右,下边框的宽度;
如果border-width后面跟四个值,则分别设置的是上,右,下,左边框的宽度;
本例中只设置一个值,表示四个边框的宽度都是10px。
*/
border-width: 10px;
/* 设置边框的颜色为red,使用border-color可以指定四个边框的颜色,设置规则与border-width相同,
本例中只设置一个值,表示四个边框的颜色都是red。
*/
border-color: red;
/* 设置边框的样式为solid,使用border-style可以指定四个边框的样式,设置规则与border-width相同,
border-style常用的值有none(默认无边框),solid(实线),dotted(点状),dashed(虚线),double(双线)等等,
本例中只设置一个值,表示四个边框的样式都是solid。
*/
border-style: solid;
}
.box3 {
/* 设置上下边框宽度为10px,左右边框宽度为20px */
border-width: 10px 20px;
/* 设置上下边框颜色为red,左右边框颜色为green */
border-color: red green;
/* 设置上下边框样式为solid,左右边框样式为dotted */
border-style: solid dotted;
}
.box4 {
/* 设置上边框宽度为10px,左右边框宽度为20px,下边框宽度为30px */
border-width: 10px 20px 30px;
/* 设置上边框颜色为red,左右边框颜色为green,下边框颜色为yellow */
border-color: red green yellow;
/* 设置上边框样式为solid,左右边框样式为dotted,下边框样式为dashed */
border-style: solid dotted dashed;
}
.box5 {
/* 设置上,右,下,左边框的宽度分别是10px,20px,30px,40px */
border-width: 10px 20px 30px 40px;
/* 设置上,右,下,左边框的颜色分别是red,green,yellow,blue */
border-color: red green yellow blue;
/* 设置上,右,下,左边框的样式分别是solid,dotted,dashed,double */
border-style: solid dotted dashed double;
}
<!-- html代码 -->
<div class="box1"></div>
<div class="box1 box2"></div>
<div class="box1 box3"></div>
<div class="box1 box4"></div>
<div class="box1 box5"></div>
css盒子模型之边框宽度,边框颜色与边框样式的更多相关文章
- CSS盒子模型元素实际宽度的计算
一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容.然而 IE 5 和 6 的呈现却是不正确的.根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- css盒子模型之边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css盒子模型的宽度不包括margin
看到教程上和一些博客上盒子模型的宽度 = content + padding + margin + border,应该是不包括margin的 <!DOCTYPE html> <htm ...
- 每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
- 聊聊css盒子模型
css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...
- 浅谈CSS盒子模型
[摘要]盒子模型是CSS中的一个重要概念,虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分.掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果,同时对于 ...
- 前端之CSS——盒子模型和浮动
一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- 前端基础——CSS盒子模型
如今很多网页都是由很多个"盒子"拼接.嵌套而成,所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解. 为了更好的说明,先举个通俗的样例:在一个仓库中放了10个纸箱,每一个纸 ...
- (5)css盒子模型(基础上)
CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin ...
随机推荐
- 举个例子去理解vuex(状态管理),通俗理解vuex原理,通过vue例子类比
通俗理解vuex原理---通过vue例子类比 本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...
- Flink Batch SQL 1.10 实践
Flink作为流批统一的计算框架,在1.10中完成了大量batch相关的增强与改进.1.10可以说是第一个成熟的生产可用的Flink Batch SQL版本,它一扫之前Dataset的羸弱,从功能和性 ...
- Codeforces Round #587 (Div. 3) F. Wi-Fi(单调队列优化DP)
题目:https://codeforces.com/contest/1216/problem/F 题意:一排有n个位置,我要让所有点都能联网,我有两种方式联网,第一种,我直接让当前点联网,花费为i,第 ...
- three arrays
three arrays 字典树上贪心 #include<bits/stdc++.h> using namespace std; ][][]; ][]; ]; ]; ][]; ][]; i ...
- Java 中如何使用clone()方法克隆对象?
java为什么要 对象克隆: 在程序开发时,有时可能会遇到以下情况:已经存在一个对象A,现在需要一个与A对象完全相同的B 对象,并对B 对象的属性值进行修改,但是A 对象原有的属性值不能改变.这时,如 ...
- Spring Data JPA开发中遇到的问题1:org.hibernate.hql.internal.ast.QuerySyntaxException: DispatchShift is not mapped
org.hibernate.hql.internal.ast.QuerySyntaxException: T_D_SHIFT_DISPATCH is not mapped 错误原因: 没有映射到表,经 ...
- z-index的各种坑
z-index属性 z-index : auto | number z-index 属性设置元素的堆叠顺序,如果为正数,则离用户更近,为负数则表示离用户更远: 拥有更高堆叠顺序的元素总是会处于堆叠顺序 ...
- openocd安装与调试
环境: 硬件:PC机<------>ARM仿真器v8.00<------>已下载好bit流的Xinlinx SoC开发板(其上有arm cortex-a9核) 软件:Redha ...
- springboot定时任务出错 Unexpected use of scheduler.
java.lang.IllegalStateException: Unexpected use of scheduler. 在启动类加: @Bean public ThreadPoolTaskSche ...
- 003-js-MD5
源码 /* global define */ ;(function ($) { 'use strict' /* * Add integers, wrapping at 2^32. This uses ...