css基础-盒子(div)模型、属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号
来源:互联网 发布:乔斯韦登 知乎 编辑:程序博客网 时间:2024/05/23 15:43
-背景的属性
l Background-color 背景颜色 例如:background-color:#ff0000;background-color:red;
l Background-image:背景图片 例如 background-image:url(图片的路径)
l Background-repeat:背景图片是否平铺 取值:no-repeat不平铺repeat-x横向平铺repeat-y纵向平铺 repeat横向和纵向都平铺 (默认)
l Background-attachment:背景附件,背景是否随着上方的内容一起滚动
取值 :fixed背景固定scroll滚动
例如:background-attachment:fixed;
l Background-position:背景图片的展开方式 例如:background-position:水平 垂直;
英文 :水平 left center right 垂直top center bottom
数值 :正值 负值
例如 background-position:left top;
例如:background-positon:0 0; background-position:10px 20px;
可以简写
Background:背景颜色 背景图片背景图片是否平铺 (附件通常仅用body标签)水平 垂直;
注意:只有水平和垂直不能颠倒,其他的属性值可以顺序颠倒
<!—设置主体标签, 背景图片,纵向平铺 水平居中垂直距离顶端20px-->
列表
去掉列表前面的项目符号
1. List-style-type:none;
可以简写为
2. List-style:none;
例如
效果
l 用小图代替列表前面的符号
List-style-image:url(图片的地址)
display: inline ;去掉前面的符号并分布在一行
之前rules=”all” 表格<table>的属性 合并表格的边框线
Css样式如何实现
Border-collapse:collapse; 合并表格的边框线
例如
边框(html标签就可以加边框线)
上边框
1. Border-top-color:颜色值;上边框的颜色
2. Border-top-style:线型;线型有solid实线 dashed虚线dotted点状线
3. Border-top-width:粗细;例如border-top-width:2px;
简写为
Border-top:粗细 线型 颜色;
右边框
1. Border-right-color:颜色值;上边框的颜色
2. Border-right-style:线型;线型有solid实线 dashed虚线dotted点状线
3. Border-right-width:粗细;例如border-right-width:2px;
简写为
Border-right:粗细 线型 颜色;
下边框
1. Border-bottom -color:颜色值;上边框的颜色
2. Border-bottom-style:线型;线型有solid实线 dashed虚线dotted点状线
3. Border-bottom-width:粗细;例如border-bottom-width:2px;
简写为
Border-bottom:粗细 线型 颜色;
左边框
1. Border-left-color:颜色值;上边框的颜色
2. Border- left -style:线型;线型有solid实线 dashed虚线dotted点状线
3. Border- left -width:粗细;例如border- left -width:2px;
简写为
Border- left:粗细 线型 颜色;
上右下左四条边框的样式一样
可以简写为 border:粗细 线型 颜色;
盒子模型(div)
盒子的必要属性
内容区:width 和height
边框 border:
内边距 padding
内容和边框之间的距离
1. Padding-top:数值;内容和上边框之间的距离
2. Padding-right:数值;内容和右边框之间的距离
3. Padding-bottom:数值;内容和下边框之间的距离
4. Padding-left:数值;内容和左边框之间的距离
简写形式
Padding:10px 20px 30px 40px;上边框距离10px 右 20px 下边框30px 左40px
Padding:10px 20px 30px; 上10px 左右 20px 下 30px
Padding:10px 30px; 上下10px 左右30px
Padding:10px; 上右下左都是10px
外边距
边框以外的距离,即盒子距离外面盒子或网页面板的距离
1. Margin-top:数值;上边框往外的距离
2. Margin-right:数值;右边框往外的距离
3. Margin-bottom:数值;下边框往外的距离
4. Margin-left:数值;左边框往外的距离
简写为
Margin:10px 20px 30px 40px; 上边框以外的10px 右是20px 下30px 左40px
Margin:10px 20px 30px; 上边框以外的10px 左右是20px 下是30px
Margin:10px 20px; 上下为10px 左右为20px
Margin:10px; 上右下左都是10px
<!—两个div盒子,第一个div内容区的宽度是300px 高度为280px,边框线为2像素,实线 蓝色,内容和上下边框之间的20px,内容和左边框的距离15px,
第二个盒子div,宽度为280px,高度为300px ,边框线1px 实线 灰色, 内容和左边框的距离为15px,两个盒子之间的距离为20像素-->
网站布局的一个思想
网站的结构就是两部分(横向和纵向) 如果是纵向的就是正常的文档流,设置内容器的宽度和高度,设置内容和边框之间的距离 padding ,边框往外的部分margin border调这些属性就可以
如果是横向排列,我们就要使用浮动
浮动(哪个框动在哪个框里面加浮动)
Float:left;
Float:right;
里面有三个盒子:左 左 右
左 左 左
浮动的特点:
设置浮动的元素,不占空间
设置浮动的元素层级高于普通元素
设置浮动之后,无论之前是否是块元素,设置浮动之后一定是块元素
盒子被浮动后后面的盒子会根据文本流动占位移动那个盒子的位置
如果在一行中的元素想横向排列,都设置浮动就可以
通常情况下div里面还有div(外面的div父盒子,)盒子里面还有盒子
如何让盒子在页面水平居中
Margin: xx auto;
1. 例如:margin: 0 auto;
2. Margin-left:auto; margin-right:auto;
清除浮动
Clear:left;
Clear:right;
Clear:both; /*清除左浮动,右清除右浮动*/
l Div里面还有<div >(外面的div父盒子>)div父盒子没有设置固定高,里面设置了浮动,父元素受影响,无法正常的计算,如何让父元素得到一个自然高
在父盒子里面的最下方加<div>给该div设置清除浮动的属性clear:both;
浏览器的一个bug ----在父元素的样式中加overflow:hidden;
可以让父元素得到一个自然高
不受浮动的影响
如有不足请多多指教!希望给您带来帮助!祝您生活愉快。
- css基础-盒子(div)模型、属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号
- css的字体设置,css的盒子模型,css的盒子模型的边框,盒子模型的内边距属性,盒子模型的外边距属性,
- 盒子模型里面的margin属性和padding属性杂记
- 如何使用好div盒子模型的margin和padding
- CSS框模型(盒子模型)padding与border属性
- CSS的方框属性(border,padding,margin)
- 盒子模型 margin和padding和盒子大小的影响
- HTML基础(三):图解CSS的padding,margin,border属性
- html-css表单的margin-right/padding-right属性设置无效解决办法
- CSS设置列表的符号
- 显示DIV边框,通过margin设置DIV的位置
- 内容(content)、填充(padding)、边框(border)、边界(margin):CSS中盒子模型有何区别?
- CSS 外补白(Margin) 内补白(Padding) 边框属性 定位(positioning)属性 布局(layout)属性
- 盒子模型-margin,padding
- css盒子模型的padding的误解
- css盒子模型设置的缩略形式
- css盒模型的padding 和margin
- 图解CSS的padding,margin,border属性
- 帝国cms搜索模板支持灵动标签和万能标签(支持到7.2)
- Python语言编码问题详解
- IE浏览器降级详细教程
- 整数中1出现的次数
- [视频讲解]史上最全面的正则化技术总结与分析!
- css基础-盒子(div)模型、属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号
- 为何优秀的程序员会不断离去
- 网易2017春招编程题:魔力手环 [python]
- 【解决】ERROR in xxx.js from UglifyJs
- 技术与技术人员的价值
- CodeForces
- 删除公众号菜单-php开发公众号视频教程
- fnl+wrf 报错记录
- Linux-001-Linux发展历史和发行版本