CSS基础

最新推荐文章于 2022-11-30 21:37:28 发布

今天会下雨吗

最新推荐文章于 2022-11-30 21:37:28 发布

阅读量278

点赞数 1

分类专栏： HTML CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45663697/article/details/102100733

版权

CSS 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

1.CSS基础语法
（1）格式：
选择器{属性1：值1；属性2：值2}
（2）单位：
px -> 像素（pixel）、% -> 百分比
（3）基本样式：
a. width、height、background-color
（4）CSS注释：
/* CSS注释内容 */
注释快捷键：
shift+alt+a、Ctrl+\

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{width: 25%;height: 100px;background: blue}
        span{background: blueviolet;}
    </style>
</head>
<body>
    <div>晴/div>
    <span>今天天气不错</span>
</body>
</html>

2.css样式的引入方式
（1）内联（行内、行间）样式：
在HTML标签上添加style属性来实现的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--<style>
        div{width: 100px;height: 100px;background-color: blueviolet}
    </style>-->
</head>
<body>
   <div style="width: 100px;height: 100px;background-color: blueviolet">这是一个块</div> 
   <div style="width: 100px;height: 100px;background-color: rgb(43, 159, 226)">这是第二个块</div> 
</body>
</html>

（2）内部样式：
在<style>标签内添加样式
注：内部样式的优点，可以复用代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{width: 100px;height: 100px;background-color: blueviolet}
    </style>
</head>
<body>
   <div>这是一个块</div> 
   <div>这是另一个块</div>
</body>
</html>

3.外部样式：在外部单独写一个css文件 -> 文件名.css
（1）通过<link>标签引入外部资源
（a）rel属性：指定资源跟页面的关系
（b）href属性：资源地址
（2）通过@import方式引入（不建议使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../common.css"><!--注意引入文件的位置，不在同一个文件夹内则为":"-->
    <title>Document</title>
</head>
<body>
    <div>这事真好</div>
</body>
</html>

common.css

div{width: 100px;height: 100px;background-color: blue}

4.css中的颜色表示法
（1）单词表示法：red、blue、green、black等
（2）十六进制表示法：黑色：#000000、白色：#ffffff
（3）rgb表示法：rgb（255,255,255:）；
注：取值范围 0~255
（4）获取颜色的方法：
（a）下载一个插件: https://www.baidufe.com/fehelper
（b）使用Photoshop ：按住“prt sc”键将想要吸取颜色的页面截屏，打开ps新建文件，粘贴截屏，点击吸管工具，点击拾色器。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css颜色表示</title>
    </head>
    <body>
        <div style="width:100px;height:100px;background-color:red">今天穿的有点多</div>
        <div style="width: 200px;height:150px;background-color:blue">想买外套了</div>
    </body>
</html>

5.css背景样式

值	描述
background-color	背景颜色
background-image	背景图片
background-repeat	背景图片的平铺方式
background-position	背景图片的位置
background-attachment	背景图随滚动条的移动方式
background-size	规定背景图片的尺寸
background-origin	规定背景图片的定位区域
background-clip	规定背景的绘制区域
url（背景地址）	引入背景图

（1）background-repeat：
repeat-x ：x轴平铺
repeat-y ：y轴平铺
no-repeat ：都不平铺
repeat（x，y）x、y轴都平铺
（2）background-position ：
x y ：number（px、%）|单词
x：left、center、right
y：top、center、bottom
（3）background-attachment ：
scroll ：随屏幕滚动（背景位置按当前元素进行偏移）
fixed ：固定背景图（背景位置按浏览器进行偏移）即如果之前背景图在我们设置的容器中间，那么给浏览器加滚动条后，背景图就变成在浏览器的中间了

6.背景实现视觉差效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       #div1{width: 1400px;height: 800px;background-image: url();background-attachment: fixed;} 
       #div2{width: 1400px;height: 800px;background-image: url();background-attachment: fixed;}
       #div3{width: 1400px;height: 800px;background-image: url();background-attachment: fixed;}
       table{background-color: cornsilk}
    </style>
</head>
<body>
    <div id="div1"> </div><!--可在每个块中加内容-->
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

注：（1）在<style>中用“#div1{}/2{}/3{}”区别每个块的背景;
（2）在<style>中可给每个块的内容加背景颜色：属性{} ，例table{background-color: cornsilk}.

7.css边框样式

属性值	说明
border-style	边框样式
border-width	边框大小
border-color	边框颜色
border-left-	左边框
border-right-	右边框
border-bottom-	下边框
border-top-	上边框

border-style：

属性值	说明
none	无样式
hidden	与“none”相同。bug应用于表除外。对于表，hidden用于解决边框冲突
solid	实线
dashed	虚线
dotted	点线
double	双线，双线的宽度等于border-width值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       /* div{width: 400px;height: 400px;border-style:solid;border-color: darkcyan;border-width: 3px;}*/
       div{width: 400px;height: 400px;border-right-style:solid;
        border-right-color: darkcyan;border-right-width: 3px;
        width: 400px;height: 400px;border-left-style:dotted;
        border-left-color:rosybrown ;border-left-width: 3px;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

8.边框实现三角形
原理：定义一个长宽像素为0的块，再将四条边的某三条边隐藏起来

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{background-color: teal}
        div{width: 0px;height: 0px;
        border-top-style: solid;border-top-width: 30px;border-top-color: rosybrown;
        border-right-style: solid;border-right-width: 30px;border-right-color:transparent;
        border-left-style: solid;border-left-width: 30px;border-left-color:transparent;
        border-bottom-style: solid;border-bottom-width: 30px;border-bottom-color:transparent;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

注：transparent–透明色

9.css文字样式

属性	描述
font	简写属性，作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。
color	字体颜色

（1）font-style

值	说明
normal	默认值，标准字体样式
italic	斜体，字体带有倾斜属性的才可以设置斜体操作
oblique	倾斜，字体不带有倾斜属性的也可以设置倾斜操作，了解即可，不推荐使用

（2）font-weight：字体粗细
（a）属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
（b）小技巧：数字 400 等价于 normal，而 700 等价于 bold。（100到500都是正常的，600到900都是加粗的）{font-weight:600;}

（3）font-family

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园 YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

注：（1）可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体；
（2）字体名称中间有空格时需要给字体添加引号；
（3）英文字体：Arial、‘Times New Roman’（英文字体不支持使用对中文使用）。
（4）中文字体：支持对英文使用

  div{font-family:Arial } 
  div{font-family: 宋体}
  div{font-family: 'Times New Roman'}

（4）font-size :
代码格式：{font-size：数值（px）}
注：字体大小一般为偶数

相对长度单位	说明
em	相对于当前对象内文本字体的尺寸
px	像素

10.综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{width: 1400px;height: 100px;border-bottom-style: double;border-bottom-color: yellowgreen;border-bottom-width: 4px;
        border-right-color: black;border-right-style:dashed;border-right-width: 4px;
        border-top-color: black;border-top-style:dashed;border-top-width: 4px;
        border-left-color: black;border-left-style:dashed;border-left-width: 4px;}
        h2{color: teal;font-family: 隶书}
        #div1{color: thistle;font-family: 华文彩云;font-size: 20px;font-style: italic;font-weight: 600;text-indent: 2em;}
        #div2{color: tomato;font-family: 宋体;text-indent: 2em;}
        /*#p1{color: thistle;font-family: 华文彩云;font-size: 20px;font-style: italic;font-weight: 600;text-indent: 2em;margin: 0;}
        #p2{color: tomato;font-family: 宋体;text-indent: 2em;}*/
    </style>
</head>
<body>
    <table>
        <td>
            <h2 align="center">张艺兴个人简介</h2>
            <div id="div1"> 张艺兴（LAY，1991年10月7日-），出生于湖南长沙，中国内地男歌手、演员，EXO/EXO-M中国籍成员。</div>
            <div id="div2">2005年， 获湖南经视《明星学院》比赛总决赛季军。2012年，以EXO-M和EXO组合成员身份正式出道。
            2015年11月，获2015亚洲影响力最具影响力全能艺人奖。2016年6月，凭借电影《前任攻略2：备胎反击战》
            获第四届中英电影节最佳男配角奖。[1]2018年4月30日，获“五四优秀青年演员”称号。</div>
            <!--<p id="p1">张艺兴（LAY，1991年10月7日-），出生于湖南长沙，中国内地男歌手、演员，EXO/EXO-M中国籍成员。</p>
            <p id="p2">2005年， 获湖南经视《明星学院》比赛总决赛季军。2012年，以EXO-M和EXO组合成员身份正式出道。
                2015年11月，获2015亚洲影响力最具影响力全能艺人奖。2016年6月，凭借电影《前任攻略2：备胎反击战》
                获第四届中英电影节最佳男配角奖。[1]2018年4月30日，获“五四优秀青年演员”称号。</p>-->
        </td>
    </table>
</body>
</html>

在这里插入图片描述注：（1）上面代码展示了如何给两段<div>和<p>文字加边框，以及如何更改边框/字体的颜色样式；
（2）text-indent: 2em——表示段落首行缩进两个字。

11.css段落样式

属性值	说明	值
text-decoration	文本修饰	下划线：underline；上划线：overline；删除线：line-through
text-transform	文本大小写（针对英文段落）	小写：lowercase；大写：uppercase；首字母大写：capitalize
text-indent	文本缩进	单位：em、px
text-align	文本对齐方式	center（居中对齐）、right（右对齐）、left（左）、justify（两端对齐）
line-height	定义行高	取值：1.number（px）；scale（比例值，跟文字大小成比例的）`p{line-height:2;}`
letter-spacing	定义字间距
word-spacing	定义词间距（针对英文）

（1）p{text-decoration:underline overline line-through;} 通过空格隔开可给段落同时添加上划线\下划线\删除线
（2）英文和数字不自动折行问题：
（a）word-break：break-all；（非常强烈的折行）
（b）word-wrap：break-word；（不是那么强烈的折行）

12.段落/字体样式综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h2{font-family: 华文隶书；}
        h3{font-family: 华文彩云;font-size: 2em;color: cadetblue;}
        #p1{font-style: italic;font-family: 华文隶书;text-indent: 2em;}
        #p2{font-family: 宋体;color: chocolate;text-indent: 2em;}
        #p3{font-family: 宋体;color: darkgoldenrod;text-decoration:underline; text-indent: 2em;}
        #p4{color: blueviolet;font-family: 宋体;text-indent: 2em;font-weight: 600;}
        #p5{color: brown;font-family: 宋体;text-indent:2em;letter-spacing:10px;line-height:2;
        word-break: break-all; }
        div{width: 600px;height: 800px;}
    </style>
</head>
<body>
    <div>
    <h2 style="text-align: center">张艺兴个人简介</h2>
    <h3>基本信息</h3>
    <p id="p1">张艺兴（LAY，1991年10月7日-），出生于湖南长沙，中国内地男歌手、演员，EXO/EXO-M中国籍成员。</p>
    <p id="p2">2005年， 获湖南经视《明星学院》比赛总决赛季军。2012年，以EXO-M和EXO组合成员身份正式出道。
        2015年11月，获2015亚洲影响力最具影响力全能艺人奖。2016年6月，凭借电影《前任攻略2：备胎反击战》
        获第四届中英电影节最佳男配角奖。[1]2018年4月30日，获“五四优秀青年演员”称号。</p>
    <h3>早年经历</h3>
    <p id="p3">1991年10月7日，张艺兴出生于中国湖南省长沙市。
        2000年参加<span style="color: blue">《音乐不断》</span>林志颖歌友会并演唱歌曲
        首次接触电视荧屏。2005年参加湖南经视<span style="color: blue">《明星学院》</span>比赛，并最终获得总决赛季军。
        <span style="color: blue">《明星学院》</span>比赛结束后，
        张艺兴回到学校继续学业。在校期间，张艺兴都会参加校文化艺术节的汇演。</p>
    <h3>个人生活</h3>
    <p id="p4">2010年12月，以公开练习生身份参与同公司前辈SHINee日本一巡演唱会的舞蹈演出，代替受伤的成员钟铉跳舞。</p>
    <p id="p5">2012年1月17日，张艺兴以SM公司男子组合EXO成员身份首次亮相，公开艺名为LAY，
        同时公开第一支单人舞蹈预告《PHOENIX凤凰》。2012年4月8日，张艺兴以S.M团体EXO和其子队EXO-M组合
        中国成员身份正式出道。2012年12月29日，张艺兴作为中国成员参与SBS歌谣大战SMThePerformance“SM7”特别舞台。</p>
    </div>
</body>
</html>

13.css复合样式
注:一个css属性只控制一种样式,叫做单一样式;
一个css属性控制多种样式,叫做复合样式;
复合样式是通过空格来实现的;
最好不要混写,写了复合样式就全写复合样式.
(1)background:{background:url() red;}
(2)border:{border:2px black;}
(3)font:{font:600 italic 2em 宋体;}
注:最少要有两个值 size family
size family要写在最后且size写在family前面

14.css选择器
(1)ID选择器
css:#elem{}
html:id=“elem”
注：1.ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的；
例如，#id1{background:red;} #id1{background:blue;} <p id="id1"> 今天天气晴朗</p> <p id="id1">风和日丽</p>这样出现两个id1是错误的。
2.命名的规范：由字母、下划线、中划线、字母（第一个不能是数字）
3.驼峰写法：searchButton（小驼峰）SearchButton（大驼峰）searchSmallButton
短线写法：search-small-button
下划线写法：search_small_button
（2）标签选择器（TAG选择器）

div{}：在style标签中给div{}写上背景颜色、字体等样式，body标签中的div标签里的内容就会有这些样式。
（3）class选择器
.elem{}
class=“elem”
注：
1.class选择器是可以复用的；
2.可以添加多个class样式；
3.多个样式的时候，样式的优先级根据css决定，而不是根据class属性中的顺序；
4.标签+类的写法。
（4）群组选择器
可以通过“，”给多个不同的选择器添加统一的css样式，达到代码的复用；
示例：div,#title,.text{background:red;}
（5）通配选择器
*{ } -> p,div,h1,h2,li.ul…{}
给所有标签加上相同的样式
示例：*{background:red;border:1px red solid;}
（6）层次选择器
ul li{}，ol li{}等 -> 给ul，ol等标签下的其他标签添加样式
示例：

<style>
        /*div~h1{background:brown;}*/
        ul li{background:cadetblue;}
        ol li{background:cornflowerblue;}
    </style>
</head>
<body>
    <!--<div>这是一个快</div>
    <p>这是一个段落</p>
    <h1>这是一个标题</h1>-->
    <ul>
        <li>这是一个无序列表</li>
        <li>这是一个列表</li>
        <li>这是一个无序</li>
    </ul>
    <ol>
        <li>这是一个有序列表</li>
        <li>这是一个列表</li>
        <li>这是一个</li>
    </ol>

在这里插入图片描述

父子 M > N{}

    <style>
        #list > li{border:1px red solid ;}/*添加border{}时一定要写border-style：solid（实线）
        \dotted（点状）\double（双实线）\dashed（虚线）*/
    </style>
</head>
<body>
    <ul id="list">
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
    </ul>
</body>

在这里插入图片描述

兄弟 M~N{} ：当前M标签下的所有N标签
示例：div~h2{}

	<style>
        div~h2{background: rosybrown;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2>
    <h2>这是一个标题</h2>
</body>

在这里插入图片描述

相邻 M+N{} ：当前M相邻的下边的一个N标签
示例：div+p{}

<style>
       div+p{background: saddlebrown;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2>
    <h2>这是一个标题</h2>

在这里插入图片描述
（7）属性选择器

M【属性】
示例：(1)div【class】{} ---- 给所有带有class属性的div标签添加css样式

<style>
       div[class]{background: salmon;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div class="search">这是一个块</div>
    <div class="search-button">这是一个块</div>

在这里插入图片描述
(2) div【class=search】{} -----给带具体有“class=“search””属性的div标签添加css样式

<style>
       div[class=search]{background: salmon;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div class="search">这是一个块</div>
    <div class="search-button">这是一个块</div>

在这里插入图片描述
(3)div【class*=search】{} ----给所有带有“class=search”属性的div标签添加css样式：包括<div class="search"></div>/<div class="search-button"></div>

<style>
       div[class*=search]{background: salmon;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div class="search">这是一个块</div>
    <div class="search-button">这是一个块</div>

在这里插入图片描述
（7）伪类选择器
M：伪类{}

：link 访问前的样式（只能添加给a标签）
：visited 访问后的样式（只能添加给a标签）
：hover 鼠标移入时的样式（可以添加给所有标签）
：active 鼠标按下时的样式（可以添加给所有标签）
示例：

a:link{color:red;}
<a href="#">这是一个链接</a>

:after / :before 通过伪类的方式给元素添加文本内容,使用content属性
示例：div:after{content:world} <div>hello</div>
这样可给“hello”后添加一个world
：nth-of-type（）

<style>
       li:nth-of-type(3){background:salmon}/*nth-of-type()括号中添加数字可以指定给某一个元素添加css样式,nth-of-type（2n）能给偶数行的元素添加css样式；nth-of-type（2n+1）可以给奇数行的元素添加css样式,可以利用n来隔项添加css样式*/
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

在这里插入图片描述

:first-of-type{} ->对应元素的第一个标签添加css样式
:last-of-type{} ->对应元素的最后一个标签添加css样式
:only-of-type{} ->

15.css优先级
（1）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css优先级</title>
           <!-- div{color: salmon;}/*先写的*/
            div{color: sandybrown;}/*当设置相同样式时，后写的优先级较高；
            内部样式与外部样式相同，如果都设置了相同样式，那么后写的引入方式优先级高*/-->
            <style>
        </style>
    </head>
    <body>
       <!-- <div>这是一个块</div>-->
    </body>
</html>

17.css盒子模型

组成：content（内容区域，由width和height组成）->padding(内边距)->border-> margin
boxing-sizing:
盒子模型的一些问题：
（1）margin叠加问题：出现在有上下两个盒子模型同时存在margin时
示例：（此时只给一个margin下边框或者margin上边框添加值即可解决）

<style>
      #box1{width: 200px;height: 200px;background: sienna;margin-bottom: 50px;} 
      #box2{width: 200px;height: 200px;background:blueviolet;margin-top: 0px;}
    </style>
</head>
<body>
    <div id="box1">这是一个边框</div>
    <div id="box2">这是一个边框</div>
</body>

使盒子模型左右居中自适应
margin-left-auto：左边自适应（盒子在浏览器最右边）
margin-right-auto：右边自适应（盒子在浏览器最左边）
margin：0 auto：居中自适应（盒子模型在浏览器中间）
解决如下问题
（1）

<style>
      #box1{width: 300px;height: 300px;background: sienna;} 
      #box2{width: 300px;height: 100px;background:blueviolet;padding-left: 30px;border-left: 20px black solid ;}/*这样会使紫色盒子比棕红色多出一块*/
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">这是一个边框</div>
    </div>
</body>

在这里插入图片描述
解决方法：在#box2{}中去掉width属性

盒子嵌套练习

（1）用padding来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      #box1{width: 350px;height: 350px;border: 1px black dashed;padding: 27px;} 
      #box2{padding: 20px;border: 5px #d7effe solid ;}
      #box3{background: #ffa0df;padding:41px;}
      #box4{border:1px white dashed;padding:3px;}
      #box5{border:1px white dashed;padding:49px;}
      #box6{border:#fcff00 5px solid;width:100px;height:100px;background: #96ff38;}
      /*嵌套在最里面的盒子要写好height属性,可不写width属性*/
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                       <div id="box6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

18.css的溢出隐藏

值	属性
visible	默认值，内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容不可见
scroll	内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚动条，以便查看其余的内容
inherit	规定应该从父元素继承overflow属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溢出隐藏</title>
    <style>
       /* div{width: 200px;height: 200px;border: 3px black solid;overflow: hidden;}*/
        /*overflow:hidden ->可以把溢出的部分隐藏起来*/
        /*div{width: 200px;height: 200px;border: 3px black solid;overflow: scroll;}*/
        /*给边框x和y轴添加滚动条*/
        div{width: 200px;height: 200px;border: 3px black solid;overflow: auto;}
        /*给边框的，y轴添加滚动条*/
        /*auto可以根据边框内容的具体情况来添加滚动条；当内容溢出时自动添加滚动条，没有溢出时则不添加滚动条*/
    </style>
</head>
<body>
    <div>溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏</div>
</body>
</html>

在这里插入图片描述

19.透明度与手势
（1）opacity：0（透明，占空间）~1(不透明)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>透明度与手势</title>
    <style>
        /*div{width: 200px;height: 200px;border: 3px black solid;opacity: 0.5;background: blueviolet;}*/
        /*0.5 ->半透明*/
        /*div{width: 200px;height: 200px;border: 3px black solid;opacity: 1;background: blueviolet;}*/
        /*1 ->不透明*/
        div{width: 200px;height: 200px;border: 3px black solid;opacity: 0;background: blueviolet;}
        /*0 ->全透明*/
    </style>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

（2）rgba（）：0~1 可以让指定样式透明，其他样式不透明
示例：background：rgba（255,0，0，0）（最后一个0表示背景为透明）

（3）cursor：手势
default：鼠标默认箭头
要实现自定义手势：（1）准备图片（2）格式图片链接前加.cur 、 .ico
示例cursor:url(./img/cursor.ico),auto

20.最大、最小宽高

min-width:min-width:300px->表示宽度大于等于300px
max-width：max-width:300px->表示宽度小于等于300px
min-height：min-height:200px->表示高度大于等于200px
max-height:max-height:200px->表示高度小于等于200px
%单位：->根据父容器的大小来换算
6.一个容器怎么自适应屏幕的高：容器加100%；
示例：html,body{height:100%;width:100%;background: blueviolet;} div{height:100%;width:100%;}

21.reset重置样式
https://blog.csdn.net/brain_bo/article/details/81560444

22.企业PNG切图工具：蓝湖：https://lanhuapp.com

23.float浮动

脱离文档流，沿着父容器靠左或靠右进行排列，如果之前已经有浮动元素，则挨着浮动的元素进行排列
文档流：是文档中可显示对象在排列时所占用的位置
示例：为加float前

加了float后：（1）

body{border:1px black solid;}
    #div1{background:blueviolet;width:100px;height:100px;float: left;}
    #div2{background:rosybrown;width:200px;height:200px;}/*div1向左浮动，离开了原文档流的位置，div2流向了原来div1的位置*/
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>

在这里插入图片描述
（2）#div1{background:blueviolet;width:100px;height:100px;float:right;} #div2{background:rosybrown;width:200px;height:200px;}

（3）#div1{background:blueviolet;width:100px;height:100px;} #div2{background:rosybrown;width:200px;height:200px;float:right;}

（4）#div1{background:blueviolet;width:100px;height:100px;} #div2{background:rosybrown;width:200px;height:200px;float:left;}
在这里插入图片描述
2.float注意点：

只影响后面的点
当浮动元素没有被设定宽度时，浮动后的宽度根据内容决定
主要给块添加浮动，也可以给内联元素加
注：
（1）last-of-type选择器：指定其父级元素最后一个子元素的css样式
例：

<head>
	<style>
	span:last-of-type{float:right;}/*使最后一个span元素中的内容向右浮动*/
	</style>
</head>
<body>
	<span>aaaa</span>
	<span>bbbb</span>
</body>

（2）nth-of-type（）选择器：选取属于其父级元素的特定类型的第n个子元素的所有元素
语法：：nth-of-type（n|even|odd|formula）

参数	描述
n	要匹配的每个子元素的索引，必须是数字，例如第一个子元素的索引是1
even	选取每个偶数子元素
odd	选取每个奇数子元素
formula	规定那个子元素需要通过公式（an+b）来选取；示例：p:nth-of-type（3n+2）选取每个第三段，从第二段开始

<head>
	<style>
	li:nth-of-type(2){height:120px;}/*給所有ul元素的第2个<p>元素的内容加样式*/
	li:nth-of-type(3){background:red;}
	</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</body>

3.清除浮动
(1)上下排列：clear属性， clear：left|right|both（both左右浮动都清除）

<style>
div:nth-of-type(1){width:100px:height:200px;float:left;}
div:nth-of-type(2){width:100px:height:200px;clear:left}/*清除第二个<div>元素的浮动*/
</style>
<body>
	<div>1</div>
	<div>2</div>
</body>

（2）嵌套排列：嵌套元素浮动会使父级元素受影响，从而会影响后面内容的排列
解决办法：
1）after伪类
2）overflow属性

值	属性
visible	默认值，内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容不可见
scroll	内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚动条，以便查看其余的内容
inherit	规定应该从父元素继承overflow属性的值

3）display：inline-block
4）设置空标签

<style>
        #box1{width: 300px;border:1px black solid;}
        #box2{width: 200px;height: 200px;background: blueviolet;float:left;}
        .clear{clear:both;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
        <div class="clear"></div><!--空标签-->
    </div>  
    aaaaa

在这里插入图片描述

今天会下雨吗

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

1.CSS基础语法（1）格式：选择器{属性1：值1；属性2：值2}（2）单位：px -> 像素（pixel）、% -> 百分比（3）基本样式：a. width、height、background-colorb. 长度单位：1.px -> 像素2.% ->百分比外容器 -> 600px...
复制链接

扫一扫