html基础背景、边框样式、内外边框、盒子尺寸大小计算

css背景
   background-color 背景顔色
   background-image 背景图片
   background-repeat 是否平铺
   background-position 背景位置
   background-attachment 背景固定还是滚动
   background:背景颜色背景图片地址背景平铺背景滚动背景位置

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 800px;height: 700px;background-color:pink;background-image: url(a9.png);background-repeat: no-repeat;/*background-position: right top;*/ /* 默认左上角  这里设置右上角*/background-position: 20px 50px;/* x坐标20px y坐标50px*//*background-position: center 50px;  左上居中  上下为50background-position: center; 左右上上下下居中*/}</style></head><body><div></div></body></html>

层叠样式

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{color: skyblue;font-size: 25px;}div{color: hotpink;}</style></head><body><div> 王可可</div>  1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。2. 样式不冲突，不会层叠</body></html>

继承性

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{color: hotpink;font-size: 25px;}</style></head><body><div><span>中国的唯一最好的城市</span></div></body></html>

CSS三大特性继承权重[优先级] 叠加
   继承或者或者*    0 0 0 0
   元素[标签]       0 0 0 1
   类伪类贡献值   0 0 1 0
   ID              0 1 0 0
   行样式           1 0 0 0
   !important       无穷大

   <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{ /*标签选择器 0 0 0 1*/color: pink;}:first-child{ /*伪类选择器 0 0 1 0*/color: hotpink;}.koing{ /*类选择器 0 0 1 0*/color: orange;}#day{ /*id选择器 0 1 0 0*/color: skyblue;}div{color: cadetblue !important; /*important出现就表示是最重要的，优先执行*/}</style></head><body><div id="day" class="koing" style="color:red; font-size: 66px;"> 笑傲江辉的一天</div></body></html>

权重叠加

   <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">li{/* 0 0 0 1*/color: rebeccapurple;}ul li{ /*后代选择器 0 0 0 1 + 0 0 0 1 = 0 0 0 2*/color: green;}.nav li{ /*类选择器 0 0 1 0 + 0 0 0 1 = 0 0 1 1*/color: blue;}</style></head><body><ul class="nav"><li>李白</li><li>白居易</li><li>杜甫</li></ul></body></html>

继承权重为0

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.duo{ /*0 0 1 0*/color: red;}li{ /*0 0 0 1*/color: green;}</style></head><body><div class="duo"><ui><li>苹果</li><!-- 继承权重为0 --><li>裤子</li><li>睡袋</li></ui></div></body></html>

border 边框样式

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div,section{width: 300px;height: 300px;background-color: hotpink;}.box{/*border-width: 10px;*/ /*边框宽度*//*border-color: pink; *//*边框颜色*//*边框样式*//*border-style: solid; 实线*//*border-style: dashed; 虚线*//*border-style: dotted; 点线*//*border-style: double;*/ /*双线*/border: 5px solid #ccc;}</style></head><body><div class="box">这是盒子</div><hr/><span>这是块</span><section>这是个section块</section></body></html>

边框样式

   <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">input{border: 0; /*没有边框*/}.user{border-width: 1px;border-color: green;border-style: solid;}.nc{border-top-width: 1px; /*上边框的宽度*/border-top-color: orange;border-top-style: solid;/*下边框*/border-bottom-width: 1px;border-bottom-color: hotpink;border-bottom-style: dashed;}.email{border-top: 1px solid orange; /*上边框写法*/border-bottom: 1px dashed hotpink;}.tel{border: 1px solid red; /*总和写法*/}</style></head><body>用户名：<input type="text" class="user"><br/>昵  称：<input type="text" class="nc"><br/>邮  箱：<input type="email" class="email"><br/>手  机：<input type="tel" class="tel"><br/></body></html>

细线表格

   <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">table{width: 900px;height: 300px;border: 1px solid green;border-collapse: collapse; /*合并相连边框*/text-align: center;}td{border: 1px solid red;}</style></head><body><table cellspacing="0" cellpadding="0"><tr><td>水果</td><td>蔬菜</td><td>粮食</td></tr><tr><td>水果</td><td>蔬菜</td><td>粮食</td></tr><tr><td>水果</td><td>蔬菜</td><td>粮食</td></tr></table></body></html>

圆角边框

   <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 200px;height: 200px;border: 1px solid red;background-color: green;}div:first-child{border-radius: 10px;}div:nth-child(2){border-radius: 100px;line-height: 200px;}div:nth-child(3){border-radius: 50%;line-height: 200px;}div:nth-child(4){border-radius: 10px 50px; /*左上角和左下角都是10px弧度 右上角和右下角都是10px弧度*/}div:nth-child(5){border-radius: 10px 50px 80px; /*左上角为10px弧度 右上角和左下角为50px弧度 右下角为80px弧度*/}div:nth-child(6){border-radius: 10px 50px 80px  100px; /*左上角为10px弧度 右上角50px弧度 右下角80px弧度 左下角100px弧度*/}div:nth-child(7){border-radius: 100px;height: 100px;}div:last-child{border-radius: 100px 0;}</style></head><body><div>4个角都是10px弧度的矩形</div><div>角度是100px为圆形</div><div>border-radius:50%是圆形</div><div></div><div></div><div></div><div></div><div></div></body></html>

盒子的边距

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 200px;height: 200px;border: 1px solid red;/*左边20px 上边70px*//*padding-left: 20px;padding-top: 70px;*//*    padding: 20px;*/ /*只写一个值上下左右都是20px*//*padding: 10px 30px;*/ /*上下10px 左右30px*//*padding: 10px 30px 50px;*/ /*上10px 左右30px 下50px*/padding: 10px 20px 30px 50px; /*顺时针 上 10 右 20 下 30 左 50px*/}</style></head><body><div>内边距就是内容和边框的距离</div></body></html>

nav 新浪导航栏

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">nav{ /*导航栏标签*/height: 41px;background-color: #fcfcfc;border-top: 3px solid #FF8860;border-bottom: 1px solid #EDEEE0;}nav a{ /*后代选择器*/font-size: 14px;color: #4c4c4c;text-decoration: none;/* 取消下划线*/padding: 0px 15px; /*上下0px 左右15px*/line-height: 41px; /*垂直居中*/display: inline-block; /*链接元素都是内元素没有大小，需要进行转换为行内块*/}nav a:hover{ /*伪类选择器 鼠标经过时*/background-color: #eee;}</style></head><body><nav><a href="#">新浪</a><a href="#">百度</a><a href="#">网易</a><a href="#">腾讯</a></nav></body></html>

margin 外边距

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 200px;height: 200px;background-color: hotpink;/*margin-top: 100px;*/ /*距离顶部100px*//*margin-left: 70px;*/margin: 30px auto; /*上下30px  左右auto自动 这样盒子级别的会自动水平居中*/padding: 4px;}header{width: 900px;height: 120px;background-color: green;margin: 0 auto; /*只要左右是auto就会一定水平居中*/text-align: center;}</style></head><body><div></div><header>头部标签</header><span>123</span></body></html>

文字背景盒子居中

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 300px;height: 100px;border: 1px solid hotpink;text-align: center; /*文字居中*/margin: 10px auto; /*盒子水平居中*/}section{width: 400px;height: 400px;border: 1px solid #000;}section img{ /*后代选择器*/width: 200px; /*插入图片改变大小*/height: 200px;margin-top: 30px; /*插入语图片也是一个盒子*/margin-left: 50px;}aside{width: 200px;height: 200px;border: 1px solid green;background: #fff url(sun.jpg) no-repeat;background-size: 200px 200px;background-position: 30px 50px;}</style></head><body>1。文字水平居中 和 盒子水平居中<div>文字水平居中</div>2。插入图片和背景图片<section><img src="../第一天/a9.png" height="691">美女图片</section><aside>13435465465465465456465465465465</aside>3.一般情况，背景图片适合做一些小图标使用，产品展示之类就会插入图片</body></html>

清除内边距

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">*{padding: 0;margin: 0;}</style></head><body>文字<p>文字1</p><p>文字2</p><ul><li>列表1</li><li>列表2</li><li>列表3</li></ul></body></html>

span 行内元素没有上下距离

   <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">span{  /*行内元素没有上下距离*/background-color: hotpink;margin: 30px 50px; /*上下30px 左右50px*/padding: 10px;}</style></head><body><span>行内元素</span></body></html>

外边距合并

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 200px;height: 200px;background-color: hotpink;}div:first-child{ /*伪类选择器*/margin-bottom: 100px;}/*外边距合并 垂直的盒子以最大的外边距离为准*/div:nth-child(2){margin-top: 100px;background-color: green;}div:last-child{margin-top: 50px;background-color: green;}</style></head><body><div></div><div></div><div></div></body></html>

内外边距塌陷问题

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/*解决内边距与外边距的三种方法[塌陷问题]*/.father{width: 300px;height: 300px;background-color: hotpink;/*解决内外边距塌陷合并的问题*//*border: 1px solid red;*//*padding: 1px;*/overflow: hidden;/* bfo*/}.son{width: 200px;height: 200px;background-color: green;margin-top: 50px;}</style></head><body><div class="father"><div class="son"></div></div></body></html>

盒子的计算尺寸
盒子占空间的大小 width + border + padding + margin
盒子实际大小： width + border + padding

计算盒子尺寸

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 55px;height: 30px;border: 1px solid #c1c1c1;margin: 200px;font-size: 16px;line-height: 30px;color: #666;border-radius: 5px 0 0 5px; /*左上5px 右上 右下0 左下5px */padding-left: 15px;/*70+15 = 85 超出大小正确 70-15 = 55*/}</style></head><body><div>新闻</div></body></html>

padding不影响盒子宽度的情况

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/*padding不影响盒子大小的情况就是不指定宽度*/div{height: 30px;border: 1px solid red;padding-left: 20px; /*因为这个盒子没有宽度，所以padding不影响*/padding-top: 30px;/*width: 100%;*/}nav{width: 300px;height: 40px;border: 1px solid green;}p{ 因为p标签没有指定宽度，所以默认和父类标签宽度一样height: 20px;background-color: orange;padding-left: 15px; /*此时padding不影响盒子宽度*/}</style></head><body><div>喷跑吧，弟弟</div><nav><spn><p>来吧，战斗吧！</p></spn></nav></body></html>

作业：搜索趣图

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">*{ /*清空内外默认边距*/margin: 0;padding: 0;}ul{list-style: none; /*取消列表自带的小圆点*/}.searchPic{width: 240px;height: 300px;border: 1px solid #D98400;border-top: 3px solid #ff8400; /*必须要放到border的后边*/margin: 100px;}.searchPic h3{ /*后代选择器*/height: 35px;line-height: 35px; /*让行高等于标签高度，可以让文字垂直居中*/border-bottom: 1px solid #D9E0EE;font-size: 16px;font-weight: normal; /*让字体不变粗*/padding-left: 12px; /*不给宽度就可以继承父类的宽度*/}.searchPic img{margin: 7px 0 0 8px; /*上 右 下 左*/}.searchPic ul li a{font-size: 12px;color: #666;text-decoration: none; /*取消下划线*/}.searchPic ul{margin-left: 8px;}.searchPic ul li{padding-left: 10px;height: 26px;line-height: 26px;background: url(square.png) no-repeat left center; /*背景图片设置*/}/*手指经过的时候添加下划线*/.searchPic ul li a:hover{ /*伪类选择器*/text-decoration: underline;color: #ff8899;}</style></head><body><div class="searchPic"><h3>搜索趣图</h3><img src="happy.gif" ><ul><li><a href="#">小胖被救后一脸不情愿的无辜</a></li><li><a href="#">邻居家的院子里长出了葡萄树</a></li><li><a href="#">张家武在2021年比武大会上赢得奖牌</a></li></ul></div></body></html>

html基础背景、边框样式、内外边框、盒子尺寸大小计算相关推荐

CSS的border边框属性边框样式内外边框圆角合集
CSS border 属性允许指定元素边框的样式.宽度和颜色. 目录 1.四个边框 2.内外边框 3.边框样式 4.圆角边框 1.border边框属性可以设置一到四个值(上边框,右边框,下边框,左边 ...
html table 内外边框,HTML_TABLE内外边框
HTML_TABLE内外边框颜色设置及页面居中时间: 2009.05.07 11:32:00 标签: 房屋基本信息房屋狀態 ---此处设置单元格边框颜色 $TYPE$ 房屋類別 $FWLB$ 所在 ...
java里面设置边框样式_DIV边框样式设置
1. 外凸边框: 效果: 日志文字代码: 日志文字代码说明: 蓝色部分为可修改部分,一一说明: 四个2表示凸起边框的宽度,用1的话不太明显,2或3比较合适: 四个outset表示边框类型为&quo ...
Android 对控件设置边框样式（边框颜色，圆角）和图片样式（圆角）
1.设置边框.圆角.背景色案例在drawable中新建一个edge.xml文件 <?xml version="1.0" encoding="utf-8" ...
php外边框样式,CSS边框样式
摘要: &CSS边框 .box{width: 150px;height: 150px;background: violet; border: 2px dashed #ccc;border-ra ...
CSS之背景样式及边框样式
1.背景样式常用属性: background-color:背景颜色 background-image:背景图片 background-repeat:背景图片的平铺方式 background-posi ...
html盒模型中border的写法,【前端】盒子模型的边框样式属性和应用技巧讲解
分割页面中不同的盒子,常常需要给元素设置边框效果.在CSS中边框属性包括边框样式属性(border-style).边框宽度属性(border-width).边框颜色属性(border-color).单 ...
【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
文章目录一.网页布局本质二.盒子模型三.盒子边框 Border 1.CSS 2.0 文档查询 2.边框设置语法 3.边框设置综合写法一.网页布局本质构建一个网页 , 首先 , 创建盒子模型 ...
CSS3初学篇章_4（边框样式/段落样式）
边框样式 1.边框线语法:border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | ins ...

html基础背景、边框样式、内外边框、盒子尺寸大小计算

html基础背景、边框样式、内外边框、盒子尺寸大小计算相关推荐

最新文章

热门文章