Day5- CSS基础-2022-11-23

最新推荐文章于 2024-10-13 17:00:37 发布

研研鱼

最新推荐文章于 2024-10-13 17:00:37 发布

阅读量147

点赞数

分类专栏： CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/Loo201612027/article/details/128082423

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、常用文本样式属性

1、font-size
font-size属性用来设置字号，单位通常为px。em、rem单位。 font-size: 30px;
网页文字正文字号通常是16px，浏览器最小支持10px字号。
在这里插入图片描述

2、font-weight
font-weight属性设置字体的粗细程度，通常就用normal和bold两个值。
font-weight: normal; 正常粗细，与400等值
font-weight: bold; 加粗，与700等值
font-weight: lighter; 更细，大多数中文字体不支持
font-weight: bolder; 更粗，大多数中文字体不支持
3、font-style属性
font-style属性设置字体的倾斜
font-style: normal; 取消倾斜，比如可以把天生倾斜的i、 em等标签设置为不倾斜
font-style: italic; 设置为倾斜字体（常用）
font-style: oblique; 设置为倾斜字体（用常规字体模拟，不常用）
4、text-decoration属性
text-decoration属性用于设置文本的修饰线外观的（下划线、删除线）
text-decoration: none; 没有修饰线
text-decoration: underline; 下划线
text-decoration: line-through; 删除线
5、line-height 行高
/* 垂直居中，行高等于盒子高 */
height: 100px;line-height: 100px;
line-heigh属性以px为单位的数值， line-height: 30px;
line-heigh属性字号的倍数，这是最推荐的写法，line-height: 1.5;
line-heigh属性也可以是百分数，表示字号的倍数 line-height: 150%;

6、text-align文本水平
/* 水平居中 */
text-align: center;
7、text-indent属性
text-indent属性定义首行文本内容之前的缩进量，缩进两个
字符应该写作text-indent: 2em; em表示字符的宽度。

二、盒模型

1、
盒子的总宽度 = width + 左右padding + 左右border
盒子的总高度 = height + 上下padding + 上下border
width属性：

width属性表示盒子内容的宽度。
width属性的单位通常是px，移动端开发也会涉及百分数、 rem等单位。
当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承。
height属性：
height属性表示盒子内容的高度。
height属性的单位通常是px，移动端开发也会涉及百分数、 rem等单位。
盒子的height属性如果不设置，它将自动被其内容撑开，如果没有内容，则height默认是0。
那BFC的意义是什么？

2、
margin：
margin是盒子的外边距，即盒子和其他盒子之间的距离
margin也有四个方向

margin-top ：上margin，“向上踹”
margin-right ：右margin，“向右踹”
margin-bottom ：下margin，“向下踹”
margin-left ：左margin，“向左踹”
margin的塌陷：
竖直方向的margin有塌陷现象：小的margin会塌陷到大的 margin中，从而margin不叠加，只以大值为准。

扩展：想想overflow:hidden;的作用！！！！

一些元素有默认的margin：

一些元素（比如body、ul、p等）都有默认的margin，在开始制作网页的时候，要将他们清除。
对比三张图的微妙变化：

盒子的水平居中：将盒子左右两边的margin都设置为auto，盒子将水平居中。

.box {
margin: 0 auto;
}

文本居中是text-align: center; 和盒子水平居中是两个概念。
盒子的垂直居中，需要使用绝对定位技术实现。

3、
行内元素和块级元素的相互转换：
行内块：img和表单元素是特殊的行内块，它们既能够设置宽度高度，也能够并排显示。
display:block;
display:inline;
display:inline-block; 行内块

display: none;
使用display: none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样。
在这里插入图片描述

visibility: hidden;
使用visibility: hidden;也可以将元素隐藏，但是元素不放弃自己的位置。
在这里插入图片描述

2022-11-23作业设计图：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 350px;
            height: 183px;
            border: 1px solid #CBD2D7;
            /* 离网页远一点 */
            margin: 100px;
        }
        .box h2 {
            padding-left: 10px;
            height: 36px;
            border-bottom: 2px solid #065D99;
            font:bold 19px/36px '微软雅黑';
            color: #065D99;
        }
        .box ul{
            padding: 10px;
            padding-bottom: 0;
            list-style: none;
        }
        .box ul li{
            height: 33px;
            border-bottom: 1px solid #CBD2D7;
            line-height: 33px;
        }
        .box ul li:last-child {
            /* 去掉最后一个li的下边框线 */
            border-bottom: none;
        }
        .box ul li a{
            font:16px/36px '微软雅黑';
            text-decoration: none;
            color: #3b3d3f;
        }
        .box ul li a:hover {
            color: orange;
            text-decoration: underline;
        }
        .box ul li span{
            font :12px/33px '微软雅黑';
            color: #3b3d3f;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>十一月计划表</h2>
        <ul>
            <li>
                <a href="">背单词</a>
                <span>[2022年11月1日]</span>
            </li>
            <li>
                <a href="">打羽毛</a>
                <span>[2022年11月2日]</span>
            </li>
            <li>
                <a href="">和大宝贝去爬山</a>
                <span>[2022年11月15日]</span>
            </li>
            <li>
                <a href="">做美食</a>
                <span>[2022年11月30日]</span>
            </li>
        </ul>
    </div>
</body>
</html>