首页 前端知识 web前端HTML

web前端HTML

2024-09-14 23:09:35 前端知识 前端哥 547 983 我要收藏

盒子模型

选择器

结构伪类选择器

作用:根据元素的结构关系查找元素

选择器说明
E:first-child查找第一个E元素
E:last-child查找最后一个E元素
E:nth-child(N)查找第N个E元素(第一个元素N的值为1)

使用公式设置多个元素,根据元素的结构关系查找多个元素例。

:nth-child(公式)

如:(注意n从0开始算术)

功能公式
偶数标签2n
奇数标签2n-1/2n+1
找到5的倍数的标签5n
找到第5个以后的标签n+5
找到第5个以前的标签-n+5

伪元素选择器

作用:创建虚拟元素(伪元素),用来摆放装饰性的内容。

选择器说明
E::before在E元素里面最前面添加一个伪元素
E::after在E元素里面最后面添加一个伪元素

after和before都是在选中的标签最里面创建伪元素,相当于都是创建子级标签。

注意点:

  • 必须设置content:""属性,用来设置伪元素的内容,如果没有内容,则引号留空即可

  • 伪元素默认是行内显示

  • 权重和标签选择器相同

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: aliceblue;

        }
        /*行内显示模式*/
        div::before{
            content: "老鼠";
        }
        /*行内显示模式*/
        div::after{
            content: "大米";
        }

    </style>
</head>
<body>
    <ul>
        <div>爱</div>
    </ul>
</body>

行内显示模式:一行共存多个,宽高属性不生效,宽高由内容撑开。

PxCook用法

PxCook(像素大厨)是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。(PSD文件:设计稿的后缀名)

模式如下:

  • 开发面板(自动智能识别)

  • 设计面板(手动测量尺寸和颜色)

    下载网址:

1.先创建一个项目web项目,然后导入项目

2.开发项目可以智能识别,设计模式可以进行手动测量

盒子模型

作用:布局网页,摆放盒子和内容。

盒子模型的组成

盒子模型重要组成部分:

  • 内容区域 - width & height

  • 内边距 - padding(出现在内容与盒子边缘之间)

  • 边框线 - border

  • 外边距 - margin(出现在盒子外面)

padding实现的效果为将整个盒子产生一定的距离。

<style> div{ width: 200px; height: 200px; background-color: aqua; padding: 20px; border:1px solid #000; margin:50px; } </style>

margin:盒子的外边距通常用来拉开盒子与盒子之间的距离。

边框线

属性名:border(bd)

属性值:边框粗细 线条样式 颜色 (不区分顺序)

常用线条样式:

属性值线条样式
solid实线
dashed虚线
dotted点线

上面的方式设置的边框线是一起设置的4边的边框线,因此我们为了满足开发需求, 还可以为4个边设置不同的属性。

属性名:border-方位词(bd+方位名词首字母)

属性值:边框粗细 线条样式 颜色 (不区分顺序)

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;

            padding: 20px;
            border:1px solid #000;
            margin:50px;
            border-top: 10px solid #000;
            border-left: 10px dashed aquamarine;
            border-bottom: 10px dotted darkorange;
            border-right: 10px solid olivedrab;
        }
    </style>

内边距

作用:设置内容与盒子边缘之间的距离

属性名:padding /padding-方位词

设置内边距方法:padding-方位词 像素大小(10px)

对于上面的写法,如果我们要设置它四个方面的值的大小都不同,那么我们就要连续写四句代码。

因此,我们可以一次写多个值。

写法:padding 上内 右内 下内 左内 (顺序不可改变,顺时针复赋值)

如果写的值小于4个,(仍然按照顺时针)如果那个方向没有值就看对面的值(上-下,左右)

盒子模型尺寸计算

默认情况下盒子的尺寸:

盒子尺寸=内容尺寸+border尺寸+内边距尺寸。

 给盒子加border/padding会撑大盒子

  • 解决方法
  1. 手动做减法:减掉border/padding尺寸

  2. 内减模式:box-sizing:dorder-box (设置该模式后,浏览器会自动减掉border/padding尺寸)

外边距

作用:拉开两个盒子之间的间距

属性名:margin (不会撑大盒子尺寸)

用法与padding相同

设置外边距方法:margin-方位词 像素大小(10px)

对于上面的写法,如果我们要设置它四个方面的值的大小都不同,那么我们就要连续写四句代码。

因此,我们可以一次写多个值。

写法:margin 上内 右内 下内 左内 (顺序不可改变,顺时针复赋值)

如果写的值小于4个,(仍然按照顺时针)如果那个方向没有值就看对面的值(上-下,左右)

版心居中效果

设置左右外边距相同即可(前提是盒子一定要有宽度),我们设置左右边距的值为auto即可达到居中效果。

清楚默认样式

清楚标签默认的样式,比如:默认的内外边距

使用统配符:

        *{
            margin: 0px;
            padding: 0px;
            (我们可以在这里添加内减模式)
        }

元素溢出

作用:控制溢出元素的内容的显示方式

属性名:overflow

属性值

属性值效果
hidden溢出隐藏
scroll溢出滚动(无论是否溢出,都显示滚动条位置)
auto溢出滚动(溢出才显示滚动条位置)

外边距问题 - 合并现象

场景:垂直排列的兄弟元素,上下margin会合并

现象:取两个margin中较大的值生效

外边距问题 - 塌陷问题

场景:父子级的标签,子级的添加上边距,会产生塌问题

现象:导致父级一起向下移动

解决办法:

  • 取消子级margin,父级设置padding

  • 父级设置overflow:hidden

  • 父级设置boeder-top

行内元素 - 内外边距问题

场景:行内元素添加margin和padding,无法改变元素垂直位置(margin(内边距)可以改变水平方向的位置,但无法改变垂直方向的间距)

解决方法:给行内元素添加line - height 可以改变垂直位置

盒子模型 - 圆角

作用:设置元素的外边框为圆角

属性名:border - radius

属性值:数字+px / 百分比 (属性值是圆角半径)

例如:淘宝的搜索框,和一些图片的显示都是圆角。

我们也可以为四个角设置不同的效果,实现方式:

boder-radius : 左上 右上 右下 左下

(从左上角顺时针赋值,没有取值的角与对角取值一样)

常用形状

圆形:给正方形盒子设置圆角属性值为宽高的一半/50%。(最大值是50%,超过50%效果仍为50%)。

胶囊形:给长方形盒子设置圆角属性值为盒子高度的一半。

盒子模型 - 阴影

作用:给元素设置阴影效果

属性名:box-shadow

属性值:x轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意:

  • x轴偏移量和Y轴偏移量 必须书写

  • 默认是外阴影,内阴影需要添加insert

```css
div {
  width: 200px;
  height: 80px;
  background-color: orange;
  box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}
```

Flex布局

标准流

标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。

浮动

基本使用

作用:让块元素水平排列。

属性名:float

属性值

  • left:左对齐
  • right:右对齐
<style>
  /* 特点:顶对齐;具备行内块显示模式特点;浮动的盒子会脱标 */
  .one {
    width: 100px;
    height: 100px;
    background-color: brown;

    float: left;
  }

  .two {
    width: 200px;
    height: 200px;
    background-color: orange;

    /* float: left; */

    float: right;
  }
</style>

<div class="one">one</div>
<div class="two">two</div>

特点:

  • 浮动后的盒子顶对齐
  • 浮动后的盒子具备行内块特点
  • 浮动后的盒子脱标,**不占用标准流的位置

 产品区域布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>区域布局</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }

        li{
            list-style: none;
        }
        
        .product{
            margin: 50px auto;
            width: 1226px;
            height: 628px;
            background-color: aquamarine;

        }
        .left{
            float: left;
            width: 234px;
            height: 628px;
            background-color: #cc1515;
            
        }

        .right{
            float: right;
            width: 978px;
            height: 628px;
            background-color:#6617e5;
        }
        .right li{
            margin-right: 14px;
            margin-bottom: 14px;
            float: left;
            width: 234px;
            height: 300px;

            background-color: chartreuse;
        }
        /*第四个第八个li*/
        .right li:nth-child(4n){
            margin-right: 0;
        }
    </style>
</head>
<body>
    <!--版心:左 右面:8个-->
    <div class="product">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

    </div>
</body>
</html>

清除浮动

场景:浮动元素会脱标,如果父级没有高度子级无法撑开父级高度(可能导致页面布局错乱)

解决方法:清除浮动(清除浮动带来的影响)

方法一:额外标签法

在父级元素的内容最后添加一个块级元素,设置css属性clear:both

<style>
.clearfix {
  clear: both;
}
</style>

<div class="father">
  <div class="left"></div>
  <div class="right"></div>
  <div class="clearfix"></div>
</div>

方法二:单伪元素法 

1.准备 after 伪元素

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

2.父级使用clearfix类

<div class="father clearfix"></div>

方法三:双伪元素法

 1.准备 after 和 before 伪元素

/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

/* after 清除浮动 */
.clearfix::after {
  clear: both;
}

2.父级使用 clearfix 类

<div class="father clearfix"></div>

方法四:overflow

父级元素添加CSS属性overflow: hidden;

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18311.html
标签
评论
发布的文章

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!