一、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)
overflow: hidden|visible|auto|scroll 指定当元素溢出时应该怎么做:隐藏溢出部分|直接呈现溢出部分(默认)|浏览器在必要时添加滚动条|添加滚动条,滑动查看溢出元素。
五、浮动与清除浮动(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页面中的样式,优先于外联样式;写在后面的永远比会覆盖写在前面的样式(前提都是特异性值相同,又有样式冲突);