wp网站模板,亲子游网站建设内容,服务好的高端网站建设报价,电子商务工作室经营范围CSS之盒子模型 margin: 用于控制元素与元素之间的距离#xff1b;margin的最基本用途就是控制元素周围空间的间隔#xff0c;从视觉角度上达到相互隔开的目的。padding: 用于控制内容与边框之间的距离#xff1b;Border(边框): 围绕在内边距和内容外的边框。Content(内容): …CSS之盒子模型 margin: 用于控制元素与元素之间的距离margin的最基本用途就是控制元素周围空间的间隔从视觉角度上达到相互隔开的目的。padding: 用于控制内容与边框之间的距离Border(边框): 围绕在内边距和内容外的边框。Content(内容): 盒子的内容显示文本和图像。 1.margin外边距 .margin-test {margin-top:5px;margin-right:10px;margin-bottom:15px;margin-left:20px; } /*推荐使用简写*/ .margin-test {margin: 5px 10px 15px 20px; } /*顺序上右下左*/ /*常见的居中*/ .mycenter {margin: 0 auto; } 2.padding内填充 .padding-test {padding-top: 5px;padding-right: 10px;padding-bottom: 15px;padding-left: 20px; } /*推荐使用简写*/ .padding-test {padding: 5px 10px 15px 20px; } 顺序上右下左 补充padding的常用简写方式 提供一个用于四边提供两个第一个用于上下第二个用于左右如果提供三个第一个用于上第二个用于左右第三个用于下提供四个参数值将按上右下左的顺序作用于四边3.float浮动 在 CSS 中任何元素都可以浮动。 浮动元素会生成一个块级框而不论它本身是何种元素。 关于浮动的两个特点 浮动的框可以向左或向右移动直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中所以文档的普通流中的块框表现得就像浮动框不存在一样。三种取值 left向左浮动 right向右浮动 none默认值不浮动 4.clear clear属性规定元素的哪一侧不允许其他浮动元素。 值描述left在左侧不允许浮动元素。right在右侧不允许浮动元素。both在左右两侧均不允许浮动元素。none默认值。允许浮动元素出现在两侧。inherit规定应该从父元素继承 clear 属性的值。注意clear属性只会对自身起作用而不会影响其他元素。 清除浮动 清除浮动的副作用父标签塌陷问题 主要有三种方式 固定高度伪元素清除法overflow:hidden伪元素清除法使用较多 .clearfix:after {content: ;display: block;clear: both; } 5.overflow溢出属性 值描述visible默认值。内容不会被修剪会呈现在元素框之外。hidden内容会被修剪并且其余内容是不可见的。scroll内容会被修剪但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。overflow水平和垂直均设置overflow-x设置水平方向overflow-y设置垂直方向案例制作个性的圆形头像 !DOCTYPE html html langen headmeta charsetUTF-8titleTitle/titlestyle* {margin: 0;padding: 0;background-color: #eeeeee;}.head-img {width: 150px;height: 150px;margin: 75px;border: 3px solid white;border-radius: 50%;overflow: hidden;}.head-imgimg {width: 100%;}/style /head bodydiv classhead-imgimg src本地图片的地址 alt/div /body /html 6.定位(position) static static 默认值无定位不能当作绝对定位的参照物并且设置标签对象的left、top等值是不起作用的的。 relative相对定位 相对定位是相对于该元素在文档流中的原始位置即以自己原始位置为参照物。有趣的是即使设定了元素的相对定位以及偏移值元素还占有着原来的位置即占据文档流空间。对象遵循正常文档流但将依据toprightbottomleft等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 注意positionrelative的一个主要用法方便绝对定位元素找到参照物。 absolute绝对定位 定义设置为绝对定位的元素框从文档流完全删除并相对于最近的已定位祖先元素定位如果元素没有已定位的祖先元素那么它的位置相对于最初的包含块即body元素。元素原先在正常文档流中所占的空间会关闭就好像该元素原来不存在一样。元素定位后生成一个块级框而不论原来它在正常流中生成何种类型的框。 重点如果父级设置了position属性例如position:relative;那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题即父级为自适应的那我子元素就设置position:absolute;父元素设置position:relative;然后Top、Right、Bottom、Left用百分比宽度表示。 另外对象脱离正常文档流使用toprightbottomleft等属性进行绝对定位。而其层叠通过z-index属性定义。 !DOCTYPE html html langen headmeta charsetUTF-8title绝对定位/titlestyle.c1 {height: 100px;width: 100px;background-color: red;float: left;}.c2 {height: 50px;width: 50px;background-color: #ff6700;float: right;margin-right: 400px;position: relative;}.c3 {height: 200px;width: 200px;background-color: green;position: absolute;top: 50px;}/style /head bodydiv classc1/divdiv classc2div classc3/div /body /html 7.fixed固定 fixed对象脱离正常文档流使用toprightbottomleft等属性以窗口为参考点进行定位当出现滚动条时对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点因为这是两个不同的流一个是浮动流另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。 在理论上被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标不论窗口是否滚动它都会固定在这个位置。 !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivx-ua-compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title返回顶部示例/titlestyle* {margin: 0;}.d1 {height: 1000px;background-color: #eeee;}.scrollTop {background-color: darkgrey;padding: 10px;text-align: center;position: fixed;right: 10px;bottom: 20px;}/style /head body div classd1111/div div classscrollTop返回顶部/div /body /html 脱离文档流 　　绝对定位 　　固定定位 不脱离文档流 　　相对定位 8.z-index #i2 {z-index: 999; } 设置对象的层叠顺序。 z-index 值表示谁压着谁数值大的压盖住数值小的只有定位了的元素才能有z-index,也就是说不管相对定位绝对定位固定定位都可以使用z-index而浮动元素不能使用z-indexz-index值没有单位就是一个正整数默认的z-index值为0如果大家都没有z-index值或者z-index值一样那么谁写在HTML后面谁在上面压着别人定位了元素永远压住没有定位的元素。从父现象父亲怂了儿子再牛逼也没用案例自定义模型框 !DOCTYPE html html langen headmeta charsetUTF-8title自定义模态框/title /head style* {margin: 0;padding: 0;}.cover {background-color: rgba(0,0,0,0.65);position: fixed;top: 0px;right: 0px;bottom: 0px;left: 0px;z-index: 999;}.refg {background-color: white;position: fixed;width: 600px;height: 400px;left: 50%;top: 50%;margin: -200px 0 0 -300px;z-index: 1000;} /style bodydiv classcover/divdiv classrefg/div /body /html 9.opacity 用来定义透明效果。取值范围是0~10是完全透明1是完全不透明。 案例实现仿造博客页面 !--html页面-- !DOCTYPE html html langen headmeta charsetUTF-8titlecnblog/titlelink relstylesheet hrefbases.css /head body!--左侧的栏目开始--div classcnlog-leftdiv classuser-tximg src../images/3.png alt/divdiv classcnblog-titlep小米论坛/p/divdiv classcnblog-messp更多小米的产品尽情关注/p/divdiv classlinkullia href#关于小米/a/lilia href#联系我们/a/lilia href#更多资讯/a/li/ul/divdiv classcnblog-bottomullia href#小米5/a/lilia href#小米6/a/lilia href#小米plus/a/li/ul/div/div!--左侧的栏目结束--!--右侧的栏目结束--div classcnblog-rightdiv classcnblog-contentdiv classcnblog-acticespan classtitle小米6/spanspan classdate2018-5-12/span/divdiv classactice-ysp让我们一起来见证小米6的强大功能吧!/p/divdiv classartice-bottomspan强大的照相机/spanspan便捷的充电/span/div/divdiv classcnblog-contentdiv classcnblog-acticespan classtitle小米7/spanspan classdate2018-3-12/span/divdiv classactice-ysp让我们一起来见证小米7的强大功能吧!功能强大的到爆炸~~~/p/divdiv classartice-bottomspan柔光双摄/spanspan快充电源/span/div/divdiv classcnblog-contentdiv classcnblog-acticespan classtitle小米6/spanspan classdate2018-5-12/span/divdiv classactice-ysp让我们一起来见证小米6的强大功能吧!/p/divdiv classartice-bottomspan强大的照相机/spanspan便捷的充电/span/div/divdiv classcnblog-contentdiv classcnblog-acticespan classtitle小米6/spanspan classdate2018-5-12/span/divdiv classactice-ysp让我们一起来见证小米6的强大功能吧!/p/divdiv classartice-bottomspan强大的照相机/spanspan便捷的充电/span/div/divdiv classcnblog-contentdiv classcnblog-acticespan classtitle小米6/spanspan classdate2018-5-12/span/divdiv classactice-ysp让我们一起来见证小米6的强大功能吧!/p/divdiv classartice-bottomspan强大的照相机/spanspan便捷的充电/span/div/divdiv classcnblog-contentdiv classcnblog-acticespan classtitle小米6/spanspan classdate2018-5-12/span/divdiv classactice-ysp让我们一起来见证小米6的强大功能吧!/p/divdiv classartice-bottomspan强大的照相机/spanspan便捷的充电/span/div/divdiv classcnblog-contentdiv classcnblog-acticespan classtitle小米6/spanspan classdate2018-5-12/span/divdiv classactice-ysp让我们一起来见证小米6的强大功能吧!/p/divdiv classartice-bottomspan强大的照相机/spanspan便捷的充电/span/div/divdiv classcnblog-contentdiv classcnblog-acticespan classtitle小米6/spanspan classdate2018-5-12/span/divdiv classactice-ysp让我们一起来见证小米6的强大功能吧!/p/divdiv classartice-bottomspan强大的照相机/spanspan便捷的充电/span/div/divdiv classcnblog-contentdiv classcnblog-acticespan classtitle小米6/spanspan classdate2018-5-12/span/divdiv classactice-ysp让我们一起来见证小米6的强大功能吧!/p/divdiv classartice-bottomspan强大的照相机/spanspan便捷的充电/span/div/divdiv classcnblog-contentdiv classcnblog-acticespan classtitle小米6/spanspan classdate2018-5-12/span/divdiv classactice-ysp让我们一起来见证小米6的强大功能吧!/p/divdiv classartice-bottomspan强大的照相机/spanspan便捷的充电/span/div/divdiv classcnblog-contentdiv classcnblog-acticespan classtitle小米6/spanspan classdate2018-5-12/span/divdiv classactice-ysp让我们一起来见证小米6的强大功能吧!/p/divdiv classartice-bottomspan强大的照相机/spanspan便捷的充电/span/div/divdiv classcnblog-contentdiv classcnblog-acticespan classtitle小米6/spanspan classdate2018-5-12/span/divdiv classactice-ysp让我们一起来见证小米6的强大功能吧!/p/divdiv classartice-bottomspan强大的照相机/spanspan便捷的充电/span/div/div/div!--右侧的栏目结束-- /body /html /*CSS页面*/ /*通用样式*/ * {margin: 0;padding: 0; } body {background-color: #f0f0f0; } a {text-decoration: none; } ul {list-style-type: none; } .clearfix:after {content: ;clear: both;display: block; } /*左边的导航栏*/ .cnlog-left {float: left;position: fixed;left: 0;width: 20%;height: 100%;background-color: #4d4c4c; } .user-tx {width: 150px;height: 150px;border: 2px solid white;border-radius: 50%;margin: 20px auto;overflow: hidden; } .user-tx img {width: 100%; } .cnblog-title, .cnblog-mess {color: darkgray;text-align: center; } .link a, .cnblog-bottom a {color: darkgray; } .link a:hover, .cnblog-bottom a:hover {color: tomato; } .link ul, .cnblog-bottom ul {text-align: center;margin-top: 60px; } /*右边的导航栏*/ .cnblog-right {float: right;width: 80%; } .cnblog-content {background-color: white;margin: 20px 40px 20px 10px;box-shadow: 3px 3px 3px rgba(0,0,0,0.45); } .cnblog-actice {border-left: 3px solid red; } .title {font-size: 18px;font-weight: 500; } .date {float: right;font-size: 12px;margin-top: 10px;margin-right: 12px; } .actice-ys {border-bottom: 1px solid black; } .actice-ys p {font-size: 18px;text-ident: 24px; } .artice-bottom span {margin-left: 20px;font-size: 12px; } 页面效果: 案例二:实现导航栏效果 !--html代码-- !DOCTYPE html html langen headmeta charsetUTF-8title导航栏示例/titlelink relstylesheet hrefmycss.css /head body!--导航栏开始--div classnavul classclearfixlia href#小米商城/a/lilia href#MIUI/a/lilia href#iop/a/lilia href#云服务/a/lilia href#水滴公益/a/lilia href#金融/a/lilia href#优品/a/li/ul/div!--导航栏结束-- /body /html /*CSS代码*/ /*通用样式*/ * {margin: 0;padding: 0; } a {text-decoration: none; } ul {list-style-type: none; } /*导航栏样式*/ .nav {background-color: black;width: 100%;height: 40px;position: fixed;top: 0; } li {float: left; } lia {display: block;padding: 0 15px;color: #b0b0b0;line-height: 40px; } lia:hover {color: tomato; } .clearfix:after {content: ;clear: both;display: block; } 页面效果: 转载于:https://www.cnblogs.com/wanglei957/p/10950830.html