任经理++徐州网站建设,做本地生活网站,建e室内设计网直播,向国旗敬礼做美德少年网站CSS 盒子模型#xff1a;外边距#xff1a;内边距#xff1a;水平居中#xff1a; 定位#xff1a;相对定位#xff1a;绝对定位#xff1a;固定定位#xff1a; 浮动#xff1a;扩展#xff1a; 盒子模型#xff1a; 盒子模型(Box Model) 规定了元素框处理元素内容… CSS 盒子模型外边距内边距水平居中 定位相对定位绝对定位固定定位 浮动扩展 盒子模型 盒子模型(Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 标签div 外边距 margin-top: 50px;设置外边距 - 上边距。 margin-left: 50px;设置外边距 - 左边距。 margin-right: 50px;设置外边距 - 右边距。 margin-bottom: 50px;设置外边距 - 下边距。 上下左右的外边距都相同简化为 margin: 50px; !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssdiv{width: 200px;height: 200px;border: orange 1px solid;/** margin-top: 50px;设置外边距 - 上边距margin-left: 50px;设置外边距 - 左边距margin-right: 50px;设置外边距 - 右边距margin-bottom: 50px;设置外边距 - 下边距*/margin: 50px;} /style/headbodydiv今天天气真好/div/body
/html 内边距 padding-top: 50px;设置内边距 - 上边距 padding-left: 50px;设置内边距 - 左边距 padding-right: 50px;设置内边距 - 右边距 padding-bottom: 50px; 设置内边距 - 下边距 上下左右的内边距都相同简化为 padding: 50px; 注意能不使用内边距就不使用因为老版本的IE浏览器不支持而且会把盒子撑变形 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssdiv{width: 200px;height: 200px;border: orange 1px solid;/** padding-top: 50px;padding-left: 50px;padding-right: 50px;padding-bottom: 50px; */padding: 50px;} /style/headbodydiv今天天气真好/div/body
/html 水平居中 水平居中margin: 0 auto; !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssdiv{width: 200px;height: 200px;border: orange 1px solid;margin: 0 auto;/*水平居中*/} /style/headbodydiv今天天气真好/div/body
/html 定位 相对定位 相对定位保留原有位置相对于原有位置进行位移。 position: relative; !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#manager{border: orange 1px solid;margin-top: 200px;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;/*相对定位保留原有位置相对于原有位置进行位移*/position: relative;/*距离定位位置上边缘50px*/top: 50px;/*距离定位位置左边缘50px*/left: 50px;}#box03{width: 100px;height: 100px;border: blue 1px solid;}/style/headbodydiv idmanagerdiv idbox01/divdiv idbox02/divdiv idbox03/div/div/body
/html 绝对定位 绝对定位不保留原有位置向上找寻父级标签判断父级标签是否有position属性如果有就按照父级标签进行位移如果没有就继续向上找寻父级标签直到body标签为止就按照body标签进行位移。 position: absolute; !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#manager{border: orange 1px solid;margin-top: 200px;position: relative;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;/*绝对定位不保留原有位置向上找寻父级标签判断父级标签是否有position属性如果有就按照父级标签进行位移如果没有就继续向上找寻父级标签直到body标签为止就按照body标签进行位移*/position: absolute;/*距离定位位置上边缘50px*/top: 50px;/*距离定位位置左边缘50px*/left: 50px;}#box03{width: 100px;height: 100px;border: blue 1px solid;}/style/headbodydiv idmanagerdiv idbox01/divdiv idbox02/divdiv idbox03/div/div/body
/html 固定定位 固定定位将元素固定到页面的某个位置一直保持不变。 position: fixed; !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssdiv{/*固定定位将元素固定到页面的某个位置*/position: fixed;top: 80%;left: 90%;}/style/headbodydiva href#top置顶/a/diva nametop/a!--下锚点--a href#new01法治/a!--定位到锚点处--a href#new02国际/a!--定位到锚点处--a href#new03娱乐/a!--定位到锚点处--a namenew01/a!--下锚点--h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1h1法治新闻/h1a namenew02/a!--下锚点--h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1h1国际新闻/h1a namenew03/a!--下锚点--h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1h1娱乐新闻/h1/body
/html 浮动
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: left;}/style/headbodydiv idmanagerdiv idbox01/divdiv idbox02/div/div/body
/html
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: left;}.clear{clear: both;/*清除浮动效果*/}/style/headbodydiv idmanagerdiv idbox01/divdiv idbox02/divdiv classclear/div/div/body
/html
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#manager{border: orange 1px solid;}#box01{width: 50%;height: 100px;float: left;}#box02{width: 50%;height: 100px;float: right;}.clear{clear: both;/*清除浮动效果*/}/style/headbodydiv idmanagerdiv idbox01/divdiv idbox02/divdiv classclear/div/div/body
/html
扩展
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssbody{background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;}input{width: 100px;height: 50px;color: white;font-weight: bolder;background-color: orange;border-radius: 5px;/*圆角属性*/box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/}img{/*圆形*/border-radius: 50%;}/style/headbodyinput typebutton value普通按钮 /br /img src../img/花.jpg width100px height100px //body
/html
