基础学习笔记

  • A+
所属分类:前端学习

前端3大结构:HTML内容结构,CSS样式美化,JS行为控制

CSS 外边距属性(Margin)
margin???????????????????? 在一个声明中设置所有外边距属性
margin:10px;?????????????? 上下左右外边距都为10px
margin:10px 20px;?????????????????? 上下外边距为10px 左右外边距20px(如果要设置左右居中值为auto)
margin:10px 20px 30px;???? 上外边距为10px 右外边距20px? 下外边距30px
margin:10px 20px 30px 40px;???????? 上外边距为10px 右外边距为20px? 下外边距30px 左外边距40px
margin-bottom????????????? 设置元素的下外边距
margin-left??????????????? 设置元素的左外边距
margin-right?????????????? 设置元素的右外边距
margin-top????????????????????????? 设置元素的上外边距

CSS 内外边距属性(Padding)
padding???????????????????????????? 在一个声明中设置所有的内边距属性
padding:10px;????????????? 上下左右内边距都为10px
padding:10px 20px;????????????????? 上下内边距为10px 左右内边距为20px
padding:10px 20px 30px;??? 上内边距为10px 左右内边距20px 下内边距30px
padding:10px 20px 30px 40px;??????? 上内边距为10px 有内边距20px 下外边距30px 左内边距40px
padding-bottom????????????????????? 设置元素的下内边距
padding-left?????????????? 设置元素的左内边距
padding-right????????????? 设置元素的右内边距
padding-top??????????????? 设置元素的上内边距

background
background-attachment??????????? 设置背景图片是否固定或者随着页面的其余部分滚动。scroll fixed inherit
background-color???????????????? 设置元素的背景颜色
background-image???????????????? 设置元素的背景图像
background-position????????????? 设置背景图像开始的位置。第一个水平 第二个垂直
background-repeat??????????????? 设置是否及如何重复背景图片。repeat no-repeat repear-x repear-y
background-size????????????????? 设置图片大小 可跟值一个或两个 第一个值水平 第二个值垂直(px,%,cover,contain)

display:block;/*变成块级元素*/

color:#999999;/*字体颜色*/

font-family:宋体,sans-serif;/*字体样式*/

font-size:9px;/*字体大小*/

font-style:itelic;/*字体斜体*/

font-variant设置小型大写字母的字体显示文本small-caps;/*小字体*/

letter-spacing:1pt;/*字间距离*/

text-decoration:none;/*去超链接下划线*/

font-weight:bold;/*字体加粗*/

text-align:center;/*文字水平方向*/

line-height:50px;/*行高*/

border-radius:3px;/*CSS3圆角*/

border:3px solid #000;/*粗细 样式 颜色*/

*{margin:0px;padding:0px;}/*通配符 1.清除所有元素默认内外边距样式之间不同浏览器的兼容问题*/

position:relative;/*相对位置 参照物*/
position:absolute;/*绝对定位 改变盒子位置*/

list-style:none;/*去掉默认的列表样式,列表前面的小圆点*/

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: