最近在看CSS,随手整理一下笔记,希望给刚看的朋友带来点帮助,有不对的地方欢迎留言,看到一定回复!
width 宽
height 高
backgroud 背景色
背景色
background-color: 颜色值 (英文单词 十六进制 rgb)
背景图
background-image:url("图片路径“)
背景图平铺
background-repeat: no-repeat repeat-x repeat-y
背景图定位
background-position: 第一个值(X轴的位置) 第二个值(Y轴的位置)
第一个值:left center right 30px;
第二个值:top center bottom 100px;
复合写法(注意顺序)
background:color image position repeat;
例子:
background-color : #db7791;
background-color : rgb(219, 119, 145);
background-color : blue;
background-image : url("img/test.jpg");
background-repeat : no-repeat;
background-position : right bottom;
background : red url("img/test.jpg") 30px 100px no-repeat;
border 边框
复合写法
border : border-width border-style border-color;
border-width 边框宽度
border-style 边框样式 solid 实线 dashed 虚线 dotted 点线 (点线IE6不认)
border-color 边框颜色 英文单词 十六进制 rgb
border-radius 圆角
transparent 透明
例子:
border-top : 100px solid #ccc;
border-right : 100px solid transparent;
border-bottom : 100px solid #ccc;
border-left : 100px solid #ccc;
border-radius : 50%;
border : 10px solid yellow;
padding 内边距 内填充
padding-top: 上内边距
padding-right: 右内边距
padding-bottom: 下内边距
padding-left: 左内边距
padding的复合写法:
padding: 10px; 一个值代表上右下左都是10px
padding: 10px 20px; 两个值 第一个代表上下 第二个代表左右
padding: 10px 20px 40px; 三个值 第一个代表上 第二个代表左右 第三个代表下
padding: 10px 20px 40px 80px; 四个值 第一个代表上 第二个代表右 第三个代表下 第四个代表左
margin 外边距
margin-top: 上外边距
margin-right: 右外边距
margin-bottom: 下外边距
margin-left: 左外边距
margin的复合写法:
margin: 10px; 一个值代表上右下左都是10px
margin: 10px 20px; 两个值 第一个代表上下 第二个代表左右
margin: 10px 20px 40px; 三个值 第一个代表上 第二个代表左右 第三个代表下
margin: 10px 20px 40px 80px; 四个值 第一个代表上 第二个代表右 第三个代表下 第四个代表左
1、子级的margin-top会在特定的情况下穿透父级。
规避方法:
a、给父级加边框
b、给父级加overflow:hidden;
2、兄弟关系的margin-top 和margin-bottom会叠压。
background 背景色
padding的复合写法:
background: color image position repeat;
注意:div实际占地面积 = div的长度 + border + padding