前端入门学习之盒模型——day03

最新推荐文章于 2024-11-03 13:28:46 发布

Serien、

最新推荐文章于 2024-11-03 13:28:46 发布

阅读量125

点赞数

分类专栏： html/css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44194443/article/details/115378251

版权

html/css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

回顾

HTML基础:

HTML文档基本结构/基本语法;

※常用的HTML标签,常用的属性;

块级元素,独占一行(默认宽度100%),画大块
1. div,h,p,ul,ol,dl,dt,dd,br,hr;

行级元素:不独占一行,在一行并列排列,细节修饰

span,a,strong,b,em,i,b,sup,sub,del,img;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 块级元素 -->
    <div>div</div>
    <h1>h1</h1>
    <p>段落</p>
    <ul>
      <li>无序</li>
    </ul>
    <ol>
      <li>有序</li>
    </ol>
    <dl>
      <dt>dt</dt>
      <dd>dd</dd>
    </dl>
    文字换行<br />
    <hr />
    水平线
    <!--  行级元素-->
    <span>span处理细节</span>
    <a href="#">超链接</a>
    <strong>着重强调-强</strong>
    <em>着重强调-弱</em>
    <b>加粗</b>
    <i>斜体</i>
    <del>删除</del>
    <sup>上标</sup>
    <sub>下标</sub>

    <img src="" alt="" />
  </body>
</html>

注意事项:
1. 块级元素可以包含其他块级和内联元素;
  1. h1,p,dt包含文字图片和其他内联元素;
  2. ul和li是父子关系,之前不要嵌套其他元素,li里可以嵌套其他元素,相似的还有ol和li,dl/dt/dd
2. 内联元素通常不要包含块元素,用来包含文字,内联元素:
  1. 特殊:a元素,当父级是块元素可以嵌套,当父级是内联元素,则不要嵌套;
  2. a不要包含其他交互元素(a,表单元素)

※HTML语义化;

css基础:
1. 介绍/语法;
2. ※声明组里的样式:
  1. 字体样式:
    1. 字体:font-family:字体名称
    2. 字号:font-size:px
    3. 粗体显示:font-weight:加粗bold,正常normal
    4. 斜体显示font-style:italic倾斜,normal正常
    5. 简写:
      1. font:风格加粗字号/行高字体;
      2. 字号和字体同时存在才有效
  2. 文本样式:
    1. 行高:line-height:
      1. 作用: 控制文字行的距离;
      2. 测量:文字顶部到下一行文字的顶部;
      3. 可以实现当行文字的垂直居中;
      4. 单位:主要是px,百分号/em/数字都相对于字号;
    2. 水平对齐方式:text-algin:left,right,center,justify;
    3. 首行缩进:text-indent:
      1. 单位最好用2em,自动跟随文字缩进;
      2. 百分比相对于元素内容区域的宽度 ;
    4. 文本装饰:text-decoration:
      1. none;
      2. underline;
      3. line-through;
      4. overline;
    5. color文本颜色:transparent透明色;
3. ※选择器:
  1. 基础选择器:
    1. 类选择器:
      1. HTML:class=“box”;
      2. css: class .box;
      3. 可以多次重复使用;
      4. 可以使用词列表(空格隔开的多个类名):class=“box list”;
    2. id选择器:
      1. HTML结构:id=“box”;
      2. css :#box;
      3. 只能使用一次;
      4. 不能使用词列表;
      5. id选择器优先级高于类选择器
    3. 元素选择器:p{margin=0;}
    4. 通配符*{margin=0;padding=0;}
    5. 优先级:范围越精确,优先级越高
  2. 派生选择器:
    1. 子元素选择器:E>F 儿子;
    2. 后代元素选择器:E F,儿孙…;
    3. 相邻:E+F,紧跟在E后的F元素;
    4. 群组选择器:E,F 元素相同,合并标注,精简代码;
    5. 交集选择器:
      1. p.box, div#header, .box#header;
      2. 作为限定条件的选择器都符合时才有效;
    6. 伪类选择器:
      1. 冒号连接;
      2. 常用伪类:
        a元素的四种状态:
        :link链接未被访问时;
        :visited链接访问过后;
        :hover鼠标滑过(悬停);
        :active链接被激活时(按下鼠标不抬起)
        
        :hover和:active可以用于任何标签,其他两个主要用于a标签
        顺序的先后:link>:visited>:hover>:active
4. 长度单位
  1. 像素px;
  2. 百分比;
  3. em;
表格
1. 表格标签
  1. table
  2. thead tbody tfoot
  3. tr
  4. td th
  5. caption表格标题
    1. 必须table开始标签之后
    2. 专指table标题
    3. 通常一个table只有一个caption
2. 固定嵌套
3. HTML属性:
  1. table
    
    table:
    1. cellpadding="0"单元格和内容之间的距离;
    2. cellspacing="0"单元格与单元之间的距离;
    3. border=“1”;
    4. align=“水平方向对齐”,left,right,center;
  2. td,th:
    1. width/height;
    2. valign=“垂直方向对齐方式”:top,middle,bottom;
    3. align=“水平方向对齐”;
4. css属性:
  1. table
    1. border-collapse:collapse边框折叠
    2. border-spacing:0
  2. td,th
    1. vertical-align:middle/top/bottom

盒模型

概念:所有的HTML元素都可以看做一个盒子,包括内容区域,内边距,边框,外边距四个组成要素
内容区域:
1. 宽度和高度(width和height)
2. min-width/height,max-width/height 最大最小宽高

边框:

围绕元素[内容区域和内边距]区域一周的线(占位);
border 最常用,可以加边框宽度,边框样式,边框的颜色,用空格隔开;
1. border-width: 宽度一般不赋值单位px
2. border-style: none无, solid 实线, dashed虚线, dotted点线, double双线
3. border-color:transparent透明,颜色名称,rgb,rgba
4. 每个都可以有0~4个取值:
  1. 1个取值是四个边
  2. 2个取值则上下相同,左右相同
  3. 3个取值则上,左右一致,下
  4. 4个取值则按顺序为上,右,下,左(顺时针)

单个边:border-left/right/top/bottom:

 		border-top: 10px solid red;
        border-left: 10px solid yellow;
        border-right: 10px solid green;
        border-bottom: 10px solid blue;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      border-width: 100px;
      background-color: yellow;
      border-style: solid;
      border-color: red green blue pink;
    }
    .box2 {
      width: 0px;
      height: 0px;
      border-width: 150px;
      border-style: solid;
      border-color: red green blue pink;
    }
    .box3 {
      width: 0px;
      border-style: solid solid none;
      border-width: 150px;
      border-color: red transparent transparent;
    }
  </style>
  <body>
    <div class="box1"></div>
    <hr>
    <div class="box2"></div>
    <hr>
    <div class="box3"></div>
  </body>
</html>

内边距:
1. padding:元素内容与边界(边框)之间的距离,内容之外,边框之内;
2. 单个方向指定:padding-left/right/top/bottom;
3. 取值:px,百分比,em,不允许负值
  1. 百分比:四个方向的padding都是相对于父元素进行计算的,不管是横向还是纵向
4. 简写规律同边框一致;
外边距:
1. margin:元素边框之外与另一个元素的距离;
单个方向指定:margin-left/right/top/bottom;
1. 取值:px,百分比,em,不允许负值:
  1. 百分比:四个方向的margin都是相对于父元素进行计算的,不管是横向还是纵向

盒模型的计算

盒子的总占位:
1. 左右:宽度+padding(左右)+margin(左右)+border(左右);
2. 上下:高度+padding(上下)+margin(上下)+border(上下);
3. 标准盒模型:width和height不包含padding和border(padding和border是在宽高之外延伸的);
独占一行====未定宽度的块元素的总占位=100%;

背景

background-color背景颜色:
1. transparent,颜色名称,rgb,rgba;
2. 默认绘制区域包括:内容+padding+border区域;
区分内边距和外边距:外边距没有背景填充,内边距padding有背景填充;
background-image:背景图像:
1. url(“图片地址”),默认为none无;
2. 默认水平和垂直方向都是平铺;
backgroud-repeat背景重复:
1. repeat默认值(水平和垂直方向都重复);
2. no-repeat不平铺
3. repeat-x水平方向平铺;
4. repeat-y垂直方向平铺;
background-position:背景定位
1. 两个值:水平位置垂直位置:
  1. 取值为px:
    1. 将图像的左上角,与指定的坐标点对齐;
    2. 正值为向右和向下移动;
    3. 负值为向上和向左移动;
  2. padding区域的左上角,(0,0)点;
  3. 关键字:
    1. 水平:left center right
    2. 垂直:top center bottom
    3. 同时作用于图像和元素
  4. 百分比:
    1. 0% 0%相当于0 0(左上角) ;
    2. 50% 50%相当于center center;
    3. 100% 100%相当于 right bottom(右下角);
    4. 同时作用于图像和元素
2. 若只设置一个值,则另一个值默认居中;
简写:
1. background:
  1. 颜色背景图片是否重复水平位置垂直位置
  2. 空格隔开
修饰性的小图标,纹理性的图片,不作为主要内容显示的用背景图片
<img>作为内容的图片:产品图,广告图