css3基础知识第三章div盒子
2015-11-14 22:47
603 查看
一张网页可以理解为多个div盒子组成。让我们先了解CSS 的框模型 (Box Model)
框模型:元素框处理元素内容、内边距、边框 和 外边距 的方式
参考下图
边框:
border:1px solid red;
1px 是边框的粗细,red是边框的颜色,solid是边框的样式
border-width 边框宽度:一般用像素表示
border-color 颜色有:可以是英文单词;也可以是16进制(记得有#号)
border-style 样式有:dashed虚线/dotted点线/solid实线/double双线(像素跳高才明显)/hidden隐藏/groove3D
凹槽边框/ridge:3D垄状边框/inset:3D朝内边框/outset:3D朝外边框
边框的四边:
border-top:1px solid red;
border-bottom:1px solid red;
border-left:1px solid red;
border-right:1px solid red;
可以直接用border:1px solid red;表示。注意1px 和 solid 中间用空格
填充:
内容与边框之间是可以设置距离,称之为填充。其顺序为上 右 下 左
padding:10px 20px 30px 40px;
也可以分开写
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
如果上 右 下 左 的值是一样的;可以直接写成一个
padding:10px;
如果上 下;右 左一样;可以写成两个
padding:10px 20px;
边界:
margin和padding用法一样
宽度:
一个元素的实际宽度是要计算边框的宽度的
div代码演示:
圆:
其实就是把圆角设置和div的宽度一样就可以了
一点点进步,一点点成长,如有有问题可以留言给我,我会及时更正
更多干货等你来拿 http://www.itit123.cn/
框模型:元素框处理元素内容、内边距、边框 和 外边距 的方式
参考下图
边框:
border:1px solid red;
1px 是边框的粗细,red是边框的颜色,solid是边框的样式
border-width 边框宽度:一般用像素表示
border-color 颜色有:可以是英文单词;也可以是16进制(记得有#号)
border-style 样式有:dashed虚线/dotted点线/solid实线/double双线(像素跳高才明显)/hidden隐藏/groove3D
凹槽边框/ridge:3D垄状边框/inset:3D朝内边框/outset:3D朝外边框
边框的四边:
border-top:1px solid red;
border-bottom:1px solid red;
border-left:1px solid red;
border-right:1px solid red;
可以直接用border:1px solid red;表示。注意1px 和 solid 中间用空格
填充:
内容与边框之间是可以设置距离,称之为填充。其顺序为上 右 下 左
padding:10px 20px 30px 40px;
也可以分开写
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
如果上 右 下 左 的值是一样的;可以直接写成一个
padding:10px;
如果上 下;右 左一样;可以写成两个
padding:10px 20px;
边界:
margin和padding用法一样
宽度:
一个元素的实际宽度是要计算边框的宽度的
div代码演示:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>名字</title> <meta name="Keywords" content="关键词,关键词"> <meta name="Description" content=""> <style type="text/css"> *{margin:0;padding:0;} div{width:240px;height:240px;border:1px solid red;} .box{float:left;margin:100px 100px 0 100px;} .box_padding{float:left;padding:50px 50px 0 50px;} </style> </head> <body> <div class="box">我是一个有margin的div盒子</div> <div class="box_padding">我是一个有padding的div盒子</div> </body> </html>border代码演示:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>border</title> <meta name="Keywords" content="关键词,关键词"> <meta name="Description" content=""> <!--css,js--> <style type="text/css"> *{margin:0;padding:0;} .demo_border{width:400px;height:300px;margin:50px auto;border:1px solid red;border-radius:8px;} .demo_border .one{width:300px;height:200px;margin:50px auto; border-right: dashed red; border-bottom: dotted red; border-left: double red; border-top: hidden red;} .demo_border .one .two{width:200px;height:100px;margin:50px auto; border-right:6px groove red; border-bottom:6px ridge red; border-left:6px inset red; border-top:6px outset red;} </style> </head> <body> <div class="demo_border"> <div class="one"> <div class="two"></div> </div> </div> </body> </html>
圆:
其实就是把圆角设置和div的宽度一样就可以了
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>圆</title> <meta name="Keywords" content="关键词,关键词"> <meta name="Description" content=""> <!--css,js--> <style type="text/css"> *{margin:0;padding:0;} .circle{width:200px;height:200px;border:1px solid green;border-radius:200px; margin:100px auto;background:green;} .circle .small{width:180px;height:180px;border:1px solid green; border-radius:180px;background:#fff;margin:10px auto;} </style> </head> <body> <div class="circle"> <div class="small"></div> </div> </body> </html>
一点点进步,一点点成长,如有有问题可以留言给我,我会及时更正
更多干货等你来拿 http://www.itit123.cn/
相关文章推荐
- css布局详解(一)——盒模型
- CSS3 Test
- css 实现元素水平垂直居中总结5中方法
- css3学习过程----制作曲线阴影效果
- CSS3的学习笔记---制作翘边阴影
- CSS基础学习十:伪元素
- CSS从大图中抠取小图完整教程(background-position应用)
- PHP:修改phpstorm的字体样式和大小
- PHP:修改phpstorm的字体样式和大小
- css3基础知识第二章控制背景-字体-文本-表格
- css3基础知识第一章语法
- css3做图片放大特效
- CheckedTextView,CheckBox和Button样式定义
- css布局
- WPF ToolKit Chart 自定义样式
- CSS——常用
- CSS hack
- 24个为Web开发人员准备的CSS3实用教程-web前端开发
- 理解CSS3 transform中的Matrix(矩阵)
- css命名规则