前端DAY4

这篇具有很好参考价值的文章主要介绍了前端DAY4。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

学习CSS的盒子模型。

一些背景知识

CSS长度单位

px:像素;em:相对元素font-size的倍数;rem:相对根(即html)字体大小;%:相对父元素来进行计算。

注:CSS中设置长度必须加单位,否则样式无效 。

元素的显示模式

1.块元素

特点

1.在页面中独占一行

2.默认宽度:撑满父元素。默认高度:由内容撑开

3.可以通过CSS设置宽高

常见块元素:

前端DAY4,前端

2.行内元素

1.在页面中不占满一行

2.默认宽度:由内容撑开。默认高度:由内容撑开

3.无法通过CSS设置宽高

常见行内元素:

前端DAY4,前端

3.行内块元素

1.在页面中不占满一行

2.默认宽度:由内容撑开。默认高度:由内容撑开

3.可以通过CSS设置宽高

常见行内元素:

前端DAY4,前端

4.修改元素的显示模式 

/* 元素作为块级元素出现 */
display:block;
/* 元素作为行内元素出现 */
display: inline;
/* 元素作为行内块元素出现 */
display: inline-block;
/* 元素会被隐藏 */
display: none;

盒子模型

盒子模型的组成部分

CSS会把所有的HTML元素看成一个盒子。

margin外边框:盒子与外界的距离。(若盒子给了具体宽度不会影响盒子大小但会影响盒子位置)

border边框:盒子的边框。

padding内边距:紧贴内容的补白区域。

content内容:元素中的文本或后代元素都是他的内容。

前端DAY4,前端

盒子大小=content+两边padding+两边border 

关于默认宽度:

所谓默认宽度,就是不设置width属性时元素所呈现的宽度。

总宽度=父的content-自身的左右margin

内容区的宽度=父的content-自身的左右margin-自身左右border-自身左右padding

写完后可以在开发者工具中检查效果。

例如编写了下面的代码:

<body>
     <div>hh</div>
</body>
    <style>
        div{ 
            background-color: gray;
            width: 300px;
            height: 300px;


            padding: 100px;
        }
    </style>

鼠标右键——检查,既可看到盒子的数据

注意:要查看div盒子的数据,一定要点击div后,显示才是div盒子的数据。

由图可以看出,div盒子的content区是300*300,padding是100。

前端DAY4,前端

盒子的内容区content

设置内容区的高度和宽度。

/* 设置内容区域的宽度 */
/* 可以设置一个精准值 */
width: 300px;
/* 也可以设置一个范围值 */
min-width: 100px;
max-width: 500px;

/* 设置内容区域的高度 */
height: 300px;
min-height: 100px;
max-height: 500px;

盒子的内边距padding

/* padding单独设置 则四个方向上都是这个100px */
            padding: 100px;

            /* padding复合去设置 每个方向上可以设置不同的值 */
            padding-top: 50px;
            padding-right: 20px;
            padding-bottom: 100px;
            padding-left: 70px;

注意:

padding值不能为负数。

行内元素设置padding时,左右padding有效果,但上下padding可能会有问题。

块级元素、行内块元素,四个方向的padding都可以有效果。

盒子的边框border

            /* 设置样式 可以合起来一起写也可以分开写 */
            /* border-style: solid; */
            border-left-style: solid;
            border-right-style: solid;
            border-top-style: solid;
            border-bottom-style: solid;

            /* 设置宽度 可以合起来一起写也可以分开写 */
            /* border-width: 10px; */
            border-left-width: 10px;
            border-right-width: 10px;
            border-top-width: 10px;
            border-bottom-width: 10px;

            /* 设置颜色 可以合起来一起写也可以分开写 */
            /* border-color: aqua; */
            border-left-color: aqua;
            border-right-color: aqua;
            border-top-color: aqua;
            border-bottom-color: aqua;

            /* 设置边框圆角 */
            border-radius: 10px;

 文章来源地址https://www.toymoban.com/news/detail-827355.html

盒子的外边距margin 

概念

写法和之前的一样。可以单独写margin,也可以对其上下左右分别设置不同的margin。

注意:

1.子元素的margin是参考父元素的content计算的。

2.上margin、左margin会影响自身的位置;下margin、右margin会影响兄弟元素的位置。

3.对应行内元素,左右的margin是可以完美设置的,上下的margin设置后是无效的。

4.margin的值可以设置为auto,对一个块级元素左右margin设置auto可以实现该元素在其父元素内水平居中。

5.margin可以为负值。

margin塌陷问题

第一个子元素的上margin会作用在父元素上,最后一个子元素的下margin也会作用在父元素上。

解决问题:

方法1:给父元素设置不为0的padding

方法2:给父元素设置不为0的border

方法3:给父元素设置CSS样式overflow:hidden(推荐)

margin合并问题

上面元素的下外边距和下面元素的上外边距会合并,两个元素的边距取两个边距的最大值而不是相加。(左右元素的外边距不会合并)

解决问题:无需解决,布局时只要设置一个外边距就可以了。

处理内容溢出

使用overflow:hidden使得溢出的内容隐藏。

隐藏元素的方式

方式一:visibility:hidden(元素看不见了但是还会占有原来的位置)

方式二:display:none(元素看不见了且不占任何位置,没有大小宽高)

元素默认样式

元素一般都有些默认样式,例如<a>、<h1>~<h6>、<p>、<ul>、ol、<body>

(body有一个8px的margin。很重要)

元素的默认样式优先级>继承的样式。所以如果要重置默认样式,选择器一定要直接选择到该元素

布局小技巧

需要实现子元素在父元素居中效果。

1.若子元素是块元素。

/* 使得子div水平居中父div */

            margin-left: auto;(父元素)

            margin-right: auto;(父元素)

/* 使得子div垂直居中父div */

            margin-top: 150px;(子元素设置,值为父content-子元素盒子总高)

/* 解决margin塌陷问题 */

            overflow: hidden;(父元素中)

<style>
        .outer{
            width: 400px;
            height: 400px;
            background-color: gray;

/* 解决margin塌陷问题 */
            overflow: hidden;
        }
        .inner{
            width: 200px;
            height: 100px;
            background-color: orange;

            /* 使得子div水平居中父div */
            margin-left: auto;
            margin-right: auto;
            
            /* 使得子div垂直居中父div */
            margin-top: 150px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">inner</div>
    </div>
</body>

2.若子元素是行内元素或行内块元素,则将其看成文本去调整居中。

/* 行内元素可以看成文本来去调整其位置 */

 /* 使得子span水平居中父div */

            text-align: center;(父元素)

 /* 使得子span竖直居中父div */

            line-height: 400px;(父元素的line-height=height)

            vertical-align: middle;(每个子元素)

<style>
        .outer{
            width: 400px;
            height: 400px;
            background-color: gray;

            /* 行内元素可以看成文本来去调整其位置 */
            text-align: center;
            line-height: 400px;
        }

        .inner{
            background-color: yellow;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="outer">
        <span class="inner">出来玩啊</span>
    </div>
</body>

ps:若想要绝对居中,则设置父元素font-size:0;

原因:因为字体设置的原因,若在父元素中显示font-size,会偏向下不能居中,所以设置父元素font-size:0;要显示出其文字,再在文字的标签中设置新的font-size值。

元素空白问题

行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。

解决方法:给父元素设置font-size:0;再给需要显示文字的元素,单独设置字体大小。

行内块的幽灵空白问题

因为行内块元素与文本的基线对齐,而文本的基线与文本最低端之间有一定距离,所以会出现一条缝隙。

解决方法:

前端DAY4,前端

 

到了这里,关于前端DAY4的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue [Day4]

    App.vue components/HmFooter.vue App.vue HmButton.vue main.js HmFooter.vue components/BaseButton.vue App.vue 父 - 子 props components/SonTest.vue App.vue prop概念 components/UserInfo.vue App.vue props校验 类型校验 基础写法+完整写法 components/BaseProgress.vue App.vue prop data 、单向数据流 components/BaseProgress.vue App.vue 子 - 父

    2024年02月14日
    浏览(42)
  • MySQL——day4

    单表查询练习 -- 1. 查询出部门编号为30的所有员工 mysql select * from emp where deptno=30;   -- 2. 所有销售员的姓名、编号和部门编号。 mysql select ename,empno,deptno from emp where job=\\\'销售员\\\';   -- 3. 找出奖金高于工资的员工。 mysql select * from emp where commsai;   -- 4. 找出奖金高于工资60%的员工

    2024年02月15日
    浏览(28)
  • day4 2/21

    2024年02月21日
    浏览(32)
  • c++day4

    作业 仿照string类,完成myString 类 class myString { private: char *str; //记录c风格的字符串 int size; //记录字符串的实际长度 public: //无参构造 myString():size(10) { str = new char[size]; //构造出一个长度为10的字符串 strcpy(str,\\\"\\\"); //赋值为空串 } //有参构造 myString(const char *s) //string s(\\\"hello world\\\")

    2024年02月09日
    浏览(30)
  • c++ day4

       

    2024年02月11日
    浏览(28)
  • QT【day4】

    chat_QT服务器端: 思维导图:

    2024年02月14日
    浏览(42)
  • 【QT】Day4

    1 思维导图 2 手动完成服务器的实现,并具体程序要注释清楚  widget.h widget.cpp  

    2024年02月15日
    浏览(35)
  • Qt,day4

    闹钟

    2024年02月13日
    浏览(34)
  • Qt : day4

    1.思维导图  2.服务器  3.时钟  

    2024年02月15日
    浏览(39)
  • 瑞吉外卖day4

    介绍  服务端要接收客户端页面上传的文件,通常都会使用Apache的两个组件 1.commons-file upload 2.commons-io Spring框架在spring-web包中对文件上传进行了封装。只需要在Controller的方法中声明一个MultipartFile类型的参数即可接受上传的文件 代码实现 upload方法里的形参名要保证与前端提

    2024年02月04日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包