css中级篇学习

最新推荐文章于 2024-06-12 12:52:53 发布

湫鹤椿水

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量83

点赞数

文章标签： css 学习前端

本文链接：https://blog.csdn.net/m0_71774042/article/details/131676224

版权

一、display（块元素和行内元素转换，隐藏元素）

（一）隐藏元素尝试(display: none):

特别注意：当script标签在body中是，若当中有要调用dom对象时，一定要在该dom对象的后面。原因：在body中的元素默认从上往下加载，如果script放在要获取的元素上面加载，就会报找不到对象的错误（null is not a object）
特别注意，函数起名的时候一定不要跟css关键字重名，我出错就是把函数命名为hidden，结果就找不到函数；
特别注意：当script在head标签中时，会在页面加载完成之后再加载js，这样就避免了找不到对象的情况。
通过js和display尝试用户手动隐藏p元素

<style>
.but1{
display: block;
margin:10px auto;
background-color: green;
color: yellow;
font-weight: bold;
}
</style>
-----------------------------------
<script type="text/javascript">
 function bye(){
	 document.getElementById("p2").style.display="none";
 }
 function see(){
	 document.getElementById("p2").style.display="block"	 
 }
 </script>
------------------------------------------
<p id="p2">门的另一边，有着所有的时间——
铃芽是一位生活在九州的一个宁静小镇上的17岁少女，某天她遇到了“正在找门”的旅行青年草太。跟随着他的脚步，铃芽来到了山上的废墟之地，她发现有一扇古老的门孤零零地伫立在那。铃芽仿佛被什么吸引了一般，将手伸向了那扇门……
据说，灾祸将会从门的那一边降临于现世，所以草太作为将门锁上的“闭门师”在各地旅行。
<span class="span1">“铃芽，我喜欢”“至于你，碍事”</span><br>
大臣话音刚落，草太竟然变成了椅子！而且那是铃芽小时候妈妈作为生日礼物送给她的缺了一条腿的椅子。为了抓住大臣，草太以三条腿椅子的样子跑了出去，铃芽也慌忙地跟了上去。
不久之后，日本各地的门开始一扇接一扇地打开。在不可思议的门和小猫的引导下，铃芽在九州、四国、关西，还有东京及日本列岛开始了“关门之旅”。途中铃芽得到了很多帮助，并且当她到达目的地时，她发现了一个被遗忘的真相
</p><br>
<button class="but1" onclick="bye()" >隐藏铃芽段落</button><button class="but1" onclick="see()">显示铃芽段落</button>

(二)display其他属性（block inline inline-block）

行内元素和块元素的区别：行内元素只会占用所需要的空间，块元素尽量将宽铺满整行。
通过display属性可以改变元素的显示方式，但是没有改变本来是什么元素的事实，比如<span>是行内元素，改变展示方式后，其还是不能包含像<div>这种块元素。
inline-block 既保留了行内元素的特征，又能够像块元素那样有宽度和高度以及外边距，与块元素的不同点就是行内块元素不会默认将右外边距打满，展现出换行效果。

二、max-width和width与块元素的水平居中

块元素的水平居中

因为块元素会尽量把width在左右铺满，所以要想水平居中，需要设置块元素的宽度（width），然后把元素的左右外边距设置为auto，交给浏览器计算，浏览器会自动均分左右外边距就实现了水平居中的效果。

div {
 width: 200px;
 border: 3px solid red;
 margin: 0px auto;
}

max-width和width的区别

max-width和width冲突，只能使用一种，会相互覆盖。
max-width设置元素的最大宽度，当视口宽度不足最大宽度时，会自动缩小宽度。
width设置元素宽度，当视口不足宽度时，会在下方产生滚动条，宽度不会减小。

三、css定位（五种类型）

relative（相对定位，关系定位）

position: relative 开启关系定位。开启后即可使用top bottom left right 来确定元素位置关系，relative的定位是相对于自身原来位置进行的定位。例如：top: 4px,就是相对于原来的位置向下移动4像素。
relative定位的元素没有脱离文档流，自身本来的位置还在文档流中占用空间。

static（默认定位方式，不能使用top等来定位）
absolute （绝对定位）

被定位的元素会脱离文档流，无论什么元素都会变成块元素，但是块元素不会占用整个左右空间。
脱离文档流后，就跟原文档流没什么关系了，因此也不占用本来的空间。
是相对于其最近的包含的父元素来定位的，包含的父元素要求必须开启了定位，如果所有父元素都没有开启定位，则相对于body来定位。

fixed（固定定位）

开启该定位会脱离文档流，相对于视口进行定位。
不会随着用户滑动滚轮而消失在视野，因为它始终相对于视口定位，应用场景主要有导航栏，广告等。

sticky（粘性定位）

像是固定定位和相对定位的结合。
使用该定位必须指定top｜bottom｜left｜right等任意一个的值，以此确定，当用户滑动页面时，该元素离上下左右任意方向的视口边界多远时才会变为fixed定位，固定不动，不会消失在用户视野。

四、溢出（overflow）

五、浮动与清除浮动（float clear）

浮动，浮动后的元素虽然不在文档流中，还是在标准文本流中（文本和图片还是会认为浮动元素占用位置，也不会被浮动元素覆盖）,在父元素的文本流中流动，直到碰到包含块的左边或右边停止。

float: left|right|inherit|none 浮动到容器的左边，浮动到容器的右边；

浮动跟绝对定位的区别，开启了绝对定位（absolute)的元素，它的包含块是同样定位的父元素，而浮动的包含块没有定位要求；另外，绝对定位的元素可以通过top等相对于父包含块精确定位。如果不指定top等，会默认在原来的位置。
消除浮动，当一个没有浮动的元素被一个已经浮动的元素覆盖时，没有浮动的元素可以使用clear规定自身某一个方向不允许浮动。

如下

文本框二和一都为浮动元素流出位置，若是在文本二中使用clear:left 则文本二就会整体向下移不允许浮动元素出现在左边。

为什么要使用浮动，浮动可以很轻松地实现元素之间的无缝贴合，和文字环绕效果。
关于width和box-sizing的使用
width:100%,是指按其父元素宽度的100%设置宽度，如果父元素没有边框和外边距，就会铺满父元素，一但想要添加父元素的内边距留下空格，就使父元素实际宽度增大，可能会破坏本来的布局，结合box-sizing:border-box后，父元素的width值永远值得是实际宽度（内外边距加上width),增加内外边距后，会减少width的值，来保证实际宽度不变，这也方便了，其中的图片一直铺满父元素的内容区。（虽然我感觉没什么用😁）

六、元素对齐

块元素的对齐：调整width和margin的大小

```
#box5{
border:3px dashed green;
margin: 0 auto;
width: auto;
}
```
margin:将宽度固定，外边距交给计算机，则计算机会自动均分左右外边距实现居中。
如果是图像，则首先通过display将其设置为块元素，然后让计算机分配外边距

img {
 display: block;
 margin: 0px auto;
 
}

3.块元素的右/左对齐，利用定位或者浮动,以块元素化的image为例

定位：

#imgcenter{
 display: block;
 position: absolute;
 right: 0px; 
}
-------------------
<img src="../imgs/lingya.jpg" style="width: 300px" id="imgcenter">
<!--可能出现元素重叠-->

浮动：

#imgcenter{
 display: block;
 float: right;
}

效果跟上面一致

元素中的文本对齐

使用text-align: center 实现文本的居中对齐；
在文本的包含元素中使用padding实现居中对齐；

#boxcenter{
 width: auto;
 margin: 0 auto;
 border: 3px solid red;
 text-align: center;
 padding: 50px;
}
-------------------
<div id="boxcenter">
<p>我是美丽的泡沫</p>
</div>

七、选择器的混合使用

下面的例子使用了组合选择器，简单选择器伪类选择器，实现了当鼠标移动到div上时，显示p元素的文字。

#boxcenter{
 width: auto;
 margin: 0 auto;
 border: 3px solid red;
 text-align: center;
 padding: 50px;
}
#boxcenter p{
 display: none;
}
#boxcenter:hover p{
display: block;
}
----------------------------
<div id="boxcenter">
<p>我是美丽的泡沫</p>
</div>

移动到上面，文字出现。合理运用选择器可以代替一部分js代码。

伪元素选择器的使用

设置元素内容首行的css样式 ,首字母的css样式，在元素最后和前面添加内容。

.p3::first-line{
color:red;
}
.p3::first-letter{
font-size: 40px;
}
.p3::before{
content: "添加内容";
font-size: 38px;
color: green;
}
.p3::after{
content: url(../imgs/5.jpg);
}
.p3::selection{
color:gray;
}
/*适配safari浏览器*/
.p3::-moz-selection{
color:gray;
}

效果展示：在后面添加的照片无法直接改变大小。

八、透明度（opacity）

使用透明度为背景或者图片设置透明度，值的范围为0～1，越接近1越不透明，越接近0越透明。
该透明度会自动传递到子元素中，要想在透明背景中添加文本，应该使用hsla中的a来指定透明度，或者rgba中的a也可以，这样设置的透明度不会传递。

九、导航栏设计（垂直导航栏水平导航栏）

首先设计最简单的导航，用到无序列表和去掉图标的css

<style>
#ul1 {
margin: 0;
padding: 0;
list-style-type: none;//去掉无序列表前面的园标
}
</style>
-------------
<ul id="ul1">
  <li><a href="https://www.baidu.com">去往百度</a></li>
  <li><a href="https://www.vip.com">去往唯品会</a></li>
  <li><a href="https://www.sogou.com">去往搜狗</a></li>
  <li></li>
</ul>

第二步，去掉链接自带下划线，将a标签变为块元素，设置ul背景颜色，再利用伪元素选择器实现鼠标移动到链接上颜色自动改变。

<style>
#ul1 {
margin: 0;
padding: 0;
list-style-type: none;
width: 100px; //设置ul的宽度为100px
background-color: gray; /*设置背景色*/
text-align: center; /*设置让文本居中*/
}
#ul1 a{
 display: block; /*将a标签变为块元素*/
 text-decoration: none; /*去掉a标签默认下划线*/
}
#ul1 a:hover{
background-color: green;/*鼠标移到上面是绿色*/
color: white;/*字体变为白色*/
}
</style>
----------------------
<ul id="ul1">
  <li><a href="https://www.baidu.com">去往百度</a></li>
  <li><a href="https://www.vip.com">去往唯品会</a></li>
  <li><a href="https://www.sogou.com">去往搜狗</a></li>
  <li></li>
</ul>

效果：

第三步将导航栏固定到视图左侧，固定（要用到定位position:absolute)

<style>
#ul1 {
margin: 0;
padding: 0;
list-style-type: none;
width: 25%;/*始终让ul占视图的宽度的25%*/
background-color: gray;
text-align: center;
height: 100%;/*始终让ul的高度铺满视图的整个高度*/
position: fixed;/*开启固定定位，将导航栏固定到视口的左边*/
top: 0px;
}
#ul1 a{
 display: block;
 text-decoration: none;
}
#ul1 a:hover{
background-color: green;
color: white;
}
<!--为了测试是否固定加的长内容，出现滚动条-->
#box1{
 width: 200px;
 border:2px solid red;
 margin-left: 50%;
 padding: 16px 1px;
}
</style>
------------------------------
<ul id="ul1">
  <li><a href="https://www.baidu.com">去往百度</a></li>
  <li><a href="https://www.vip.com">去往唯品会</a></li>
  <li><a href="https://www.sogou.com">去往搜狗</a></li>
  <li></li>
</ul>
<div id="box1">
<p id="p1">
很长的内容，在这里省略。
</p>
</div>

水平导航栏，因跟侧边栏类似，仅需要用到浮动和行内块元素。

<style>
#ul2{
 list-style-type: none;/* 将列表项的标志去掉 */
 margin: 0; /* 将无序列表的外边距和内边距都设置为零，减小对定位的干扰  */
 padding: 0;
 background-color: gray;/* 设置ul的背景色 */
 border:1px solid yellow;/* 给ul添加外边框 */
 width: 75%; /* 让ul的宽度始终是视口的75% */
 height: auto; /* 高度被子元素撑开 */
 position: fixed; /* 开启固定定位，让导航栏固定到视图右上角 */
 right:0;
 top:0;
}
#ul2 li{
 float: left;/* 让列表项浮动，在ul中自左向右排开 */
}
#ul2 a{
 display: inline-block; /* 将标签a设置成行内块元素，默认内外边距都是0 */
 padding: 8px; /* 设置内边距增加美观度 */
 text-align: center; /* 文本居中 */
 text-decoration: none; /* 去除超链接的默认下划线 */
 border-right: 1px solid yellow; /* 增加内边框 */
}
#ul2 a:hover{
background-color: green;/* 鼠标移动到元素上时背景色变为绿色，字变成白色*/
color: white;
}
</style>
--------------------------------------------------------------------
<ul id="ul2">
  <li><a href="https://www.baidu.com">去往百度</a></li>
  <li><a href="https://www.vip.com">去往唯品会</a></li>
  <li><a href="https://www.sogou.com">去往搜狗</a></li>
  <li><a href="https://www.dianping.com">去往大众点评</a></li>  
</ul>

十、下拉列表制作

简单下拉框制作，预热一波

<style>
#box2{
display:inline-block;
margin: 10px auto;
position: relative;
right: -48%;
left: auto;
border: 1px solid red;
}
#box2 img{
 display: none;
 width: 100%;
 position: absolute;
 box-shadow: 0px 13px 10px 0px rgba(134,123,234,0.3)
}
#down-go{
 margin: 0px;
 padding: 0px;
}
#down-go:hover+img{
 display: block;
}
</style>
------------------------------------------------------
<div id="box2">
  <div id="down-go">鼠标放到我上面，查看该电影海报</div>
  <img alt="changan" src="../imgs/changan.jpeg">
</div>

效果：

升级下拉列表，让用户能自己选择，并且会出现鼠标触到后列表保持。

设计思路，三个结构，一个大的div包含两个小的div，小的div分别扮演，触发者，与下拉列表的角色；大的div开启相对定位，与下拉列表开启绝对定位相互配合。
代码如下：

<style>
#drop-down{
 display: inline-block; /* 大div始终被内容撑开，外边距和内边距都为0 */
 position: relative;/* 开启相对定位*/
 right: -50%; /* 相对与本来左边的位置向右移动了视口的50% */
}
#drop-content{
 display: none; /*默认展示方式设为隐藏  */
 width: 100%; /* 宽度始终与父元素，即最大的div保持一致 */
 box-shadow: 0px 23px 34px 34px rgba(255,200,150,0.3);/* 为下拉列表添加阴影，使下拉列表更像  */
 position: absolute; /* 开启绝对定位，默认位置还会被上面文档流中元素挡住 */
}
#drop-btn{
 border: 3px solid red;/*设置按钮边框  */
 margin: 0;
 padding:0;
}
#drop-content a{
display: block; /* 块元素显示 */
padding: 16px 18px; /* 内边距  */
background-color: green; /* 背景颜色设为绿色 */
color: red; /* a标签默认颜色 */
text-decoration: none; /* 去掉下划线 */
text-align: center; /* 文本居中 */
}
#drop-down:hover #drop-content{
 display: block; /* 当第一级div被触及时，下拉菜单显示，这实现了，
 列表移出按钮而列表不消失，因为鼠标始终在包含元素中 */
}
#drop-btn:hover{
 color: white; /* 设置触发按钮被触及时的字的颜色和背景色 */
 background: gray;
}
#drop-content a:hover{
 color: white;  /* 设置a元素被触及的颜色和背景色 */
 background-color: gray;
}
</style>
-------------------------------------------------------
<div id="drop-down">
  <div id="drop-btn">接触我，显示并选择下拉菜单</div>
  <div id="drop-content">
  <a href="https://www.baidu.com">百度首页</a>
  <a href="https://www.vip.com">唯品会</a>
  <a href="https://www.sogou.com">搜狗首页</a>
  </div>
</div>

效果图：

同样再做练习，鼠标触到照片放大显示

<style>
#drop-down1{
  display: inline-block;
  position: relative;
  right: -50%;
}
#img-drop{
  display: block;
  width: 90px;
}
#drop-content1{
 display: none;
 position: absolute;
}
#drop-content1 img{
  display: block;
  width: 500px;
}
#drop-down1:hover #drop-content1{
  display: block;
}
</style>
---------------------------------------------
<div id="drop-down1">
  <img src="../imgs/lingya.jpg" id="img-drop">
  <p>放到图片上查看细节</p>
  <div id="drop-content1">
  <img src="../imgs/lingya.jpg">
  </div>
</div>

同理在导航栏中加入下拉框

<style>
.drop-a{
 display: none;
 position: absolute;
}
.drop-a a{
 display: block;
 width: 100%;
 border-right: 0px solid red;
}
.drop-up:hover .drop-a{
 display: block;
}
</style>
----------------------------------------
<ul id="ul2">
		<li><a href="https://www.baidu.com">去往百度</a></li>
		<li><a href="https://www.vip.com">去往唯品会</a></li>
		<li><a href="https://www.sogou.com">去往搜狗</a></li>
		<li><a href="https://www.dianping.com">去往大众点评</a></li>
		<li class="drop-up">
		    <a href="#">其他去向</a>		
			<div class="drop-a">
			<a href="https://qzone.qq.com">qq空间</a>
			<a href="https://baike.baidu.com">百度百科</a>
			<a href="https://www.so.com">360搜索</a>
			</div>
	    </li>
	</ul>

再加上前面的第二个导航之前的设计，实现效果

十、css中篇学习其他内容。

通过resize属性禁用textarea右下角用来调整大小的抓取器。

css计数器

要用到 counter-reset 重置一个统计属性，或添加一个不同级属性， counter-increment 增加某个计数器的值，content 结合伪元素选择器在元素前添加内容， conter()调出某个统计器的值，conters（统计器，添加内容）在两个统计器的值中添加内容
统计器都叫section，不同级别的同一个元素使用counter-reset是新增加一个计数器，同一级别的靠下的元素，会重置上个同一级别的相同元素的计数器的值。
实例：

<style>
ol {
	counter-reset: mysection; /* 在ol元素中设置或更新计数器 */
	list-style-type: none;  /* 去除li前面的标志 */
}

li::before {
	counter-increment: mysection;  /* 在元素li中增加计数器的值 */
	content: "列表" counters(mysection, ".") ""; /* 在元素之前添加内容，
	counters意思是当有两个同名计数器存在，则在中间添加值 */
}
</style>
----------------------------------------------------------
<ol>
		<li>春花秋月</li>
		<li>梨花弄月</li>
		<li>东篱把酒
			<ol>
				<li>西施醉酒</li>
				<li>东施效颦</li>
			</ol>
		</li>
	</ol>
	<ol>
		<li>大风起兮</li>
		<li>风鹏正举</li>
	</ol>

由上例可以看出我们在css中在ol中添加了计数器（mysection），每到一处li会加一，但第三个li后，又碰上了不同级别的ol（此ol是上一个ol的孙子元素）,这时候ol就又创建了一个名叫mysection的值，并且在后来的li中自增。

大风起兮的ol跟第一个ol同级，所以它重置了第一个计数器。

最后效果。

网站布局

通常分为四部分：页眉（显示网站名字等信息）页脚（显示网站作者，备案号等信息）导航栏，内容区

2.内容区可以自由布局，但宽度总和一定要是100%。

表示长度和大小的单位

分类：绝对单位，相对单位。绝对单位是说，规定了几个像素和厘米它就永远是这个大小，不会随着设备不同而改变；相对单位可以是相对于父元素或者相对于视口，随着他们大小的改变而改变。
相对单位

em	相对于元素字体大小，1em表示当前的两倍
rem	相对于根元素字体大小
ch	相对于字符"0"的大小
vw	相对于视口（浏览器窗口）的宽度，1vw=视口宽度*1%
vh	相对于视口（浏览器窗口）的高度，1vw=视口宽度*1%
vmin	从视口的宽和高中选择较小者作为基准
vmax	从视口的宽和高中选择较大者作为基准。
%	等于父元素宽或高或字体大小的百分比。

3. 绝对单位

cm	厘米
mm	毫米
in	英寸（1in=96px=2.54cm=72pt)
px	像素
pc	派卡（1pc=12pt)
pt	点

像素在落后的设备上可以表现为一个像素点（dot）在分辨路较高的设备上则表现为多个像素点。

css选择器的特异性（当css修饰产生冲突时，选用规则）

特异性就是css发生冲突时要选用谁的依据，css规定行内元素具有最高的特异性1000，id选择器其次100，再就是属性，类，伪类选择器具有100，最后是元素选择器1，在后面就是通用选择器（*）具有0。
css选用的几大原则，在html页面中的样式，优先于外联样式;写在后面的永远比会覆盖写在前面的样式（前提都是特异性值相同，又有样式冲突）;

湫鹤椿水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中级篇学习

特别注意：当script标签在body中是，若当中有要调用dom对象时，一定要在该dom对象的后面。原因：在body中的元素默认从上往下加载，如果script放在要获取的元素上面加载，就会报找不到对象的错误（null is not a object）特别注意，函数起名的时候一定不要跟css关键字重名，我出错就是把函数命名为hidden，结果就找不到函数；特别注意：当script在head标签中时，会在页面加载完成之后再加载js，这样就避免了找不到对象的情况。
复制链接

扫一扫