border(元素边框详解）

border的属性：

width：粗细程度，一般都以px为单位，color：颜色，与文字的color属性一样，style：样式，solid（实线）、dashed（虚线）、dotted（点划线）、none（不显示）.....等等较为常用。border常用样式可以写在一起，例如：border：1px solid blue.

padding表示“内容”与“边框”之间的间隙

形式：padding：padding-top | padding-right | padding-bottom | padding-left 也就是上、右、下、左

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#div1{width:300px;height:200px;border:1px solid #CDCDCD;padding:100px 60px 50px 20px;color:#A52A2A}</style></head><body><div id="div1">标准盒子模型测试</div></body>
</html>

margin（外边距）的使用：

理解margin作用：用于控制块与块之间的距离。块元素之间的左右margin。

结论：当两个块元素紧邻的时候，它们之间的距离为第一个元素的margin-right加上第二个元素的margin-left。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>margin详解</title><style type="text/css">div{width:100px;height:50px;border:1px solid blue;background-color: #E66B14;}#div1{margin-right:20px;float:left;}#div2{margin-left:50px;float:left;}</style></head><body><div id="div1">div1</div><div id="div2">div2</div></body>
</html>

块元素之间的上下margin：在块级元素中当两个div设置了margin-top和margin-bottom时，两个块级元素的实际间隔并不是二者相加，而是二者取其“较大”者。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#div1{width:300px;height:200px;border:20px solid gray;}#div2{width:200px;height:100px;border:1px solid blue;background-color:yellow;margin-top:0px;margin-left:0px;}</style></head><body><div id="div1"><div id="div2">字块元素</div></div></body>
</html>

border(元素边框详解）相关推荐

外边距+内边距+边框详解
外边距+内边距+边框详解外边距(margin) margin可以设置盒子和盒子之间的距离若想要盒子水平居中,则必须满足两个条件: (1).盒子必须设置宽度 (2).让左右外边距为auto(marg ...
html页面的盒子边框怎么做的,HTML+CSS入门用三层盒子结构实现多边框详解
本篇教程介绍了HTML+CSS入门用三层盒子结构实现多边框详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 如果想给每个盒子加上美观的border,实现如下效果如果 ...
自动化测试框架[Cypress元素操作详解]
前提已经熟练掌握了Cypress的基本知识,请参考自动化测试框架[Cypress概述]和自动化测试框架[各自动化测试框架比较] 已经熟练掌握Cypress环境配置,请参考自动化测试框架[Cypres ...
C++ STL list添加（插入）元素方法详解
C++ STL list添加(插入)元素方法详解主要内容主要内容参考链接
CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解
原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客简介本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...
html右侧浮动菜单,HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单
原标题:HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单今天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象 ...
css改变伪元素color_jQuery教程改变css伪元素样式详解
本篇教程介绍了jQuery教程改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
css3：border-radius圆角边框详解 (变圆图片)
转:http://www.kuqin.com/shuoit/20141014/342620.html border-radius:50% 今天来聊聊这个border-radius属性,radius的英 ...
html正方形边框,详解HTML设置边框的三种方式
HTML设置边框的三种方式 border-width: 1px 2px 2px; border-style: solid dashed dotted; border-color:red green b ...

border(元素边框详解）

border(元素边框详解）相关推荐

最新文章

热门文章