CSS_定位_宽高自适应上

柠檬养乐多.

已于 2022-02-12 14:51:19 修改

阅读量333

点赞数

文章标签： html css javascript

于 2022-01-11 22:47:39 首次发布

本文链接：https://blog.csdn.net/ysj94s7/article/details/122443467

版权

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<!--

1.如何隐藏元素

a. display：none ===============隐藏的元素不占页面空间

b.visibility：hidden============隐藏的元素占页面空间

隐藏属性：visibility：hidden

c. opacity：透明让整个元素变透明取值0-1 0是纯透明（让整个元素都隐藏，边框也会隐藏）======================隐藏的元素占页面的空间

d.widh:0px;height:0px;========= 隐藏的元素不占页面的空间

如果你的盒子中有文本的话，则还需要设置overflow：hidden

e.transform：scale（0）=========隐藏的元素还占页面的空间

2.选择器：加号选择器：相邻的一个兄弟选择器（+）

只能向后查找一个兄弟（挨着的）

选择器：通用兄弟薛之谦（~）

能查找后面所有的兄弟

二级菜单第一种写法

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

*{margin: 0;padding: 0;}

ul,ol{list-style: none;}

.box{

width: 600px;

height: 40px;

font-size: 15px;

background-color: violet;

border: 1px solid gray;

margin: 0 auto;

}

.box>li{

float: left;

width: 100px;

height: 40px;

line-height: 40px;

text-align: center;

}

/* 一级菜单的划过效果 */

.box>li:hover{

background-color: orange;

}

/* 所有的二级都隐藏 */

.box ul{

display: none;

}

/* 划过一级里面的li的时候让li里面的ul显示 */

.box>li:hover>ul{

display: block;

background-color: slateblue;

}

/* 划过二级的li时候改变样式 */

.box>li li:hover{

background-color: skyblue;

}

</style>

</head>

<body>

二级菜单:使用的是ul，li

<li>柠檬养乐多

<ul>

<li>蜜桃养乐多</li>

</ul>

</li>

<li>柠檬养乐多

<ul>

<li>蜜桃养乐多</li>

</ul>

</li>

<li>柠檬养乐多

<ul>

<li>蜜桃养乐多</li>

</ul>

</li>

<li>柠檬养乐多

<ul>

<li>蜜桃养乐多</li>

</ul>

</li>

<li>柠檬养乐多

<ul>

<li>蜜桃养乐多</li>

</ul>

</li>

<li>柠檬养乐多

<ul>

<li>蜜桃养乐多</li>

</ul>

</li>

</ul>

</body>

</html>

二级菜单第二种写法

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

*{margin: 0;padding: 0;}

ul,ol{list-style: none;}

.box{

width: 600px;

height: 40px;

font-size: 15px;

background-color: violet;

border: 1px solid gray;

margin: 0 auto;

}

.box>li{

float: left;

width: 100px;

height: 40px;

line-height: 40px;

text-align: center;

}

/* 一级菜单的划过效果 */

.box>li:hover{

background-color: orange;

}

/* 所有的二级都隐藏 */

.box ul{

display: none;

}

/* 划过无论哪一个li的时候都能让二级菜单一起显示*/

.box:hover ul{

display: block;

}

/* 划过二级li的时候改变样式*/

.box ul>li:hover{

background-color: springgreen;

color:yellowgreen;

}

</style>

</head>

<body>

二级菜单:使用的是ul，li

<li>柠檬养乐多

<ul>

<li>蜜桃养乐多</li>

</ul>

</li>

<li>柠檬养乐多

<ul>

<li>蜜桃养乐多</li>

</ul>

</li>

<li>柠檬养乐多

<ul>

<li>蜜桃养乐多</li>

</ul>

</li>

<li>柠檬养乐多

<ul>

<li>蜜桃养乐多</li>

</ul>

</li>

<li>柠檬养乐多

<ul>

<li>蜜桃养乐多</li>

</ul>

</li>

<li>柠檬养乐多

<ul>

<li>蜜桃养乐多</li>

</ul>

</li>

</ul>

</body>

</html>

3.行内块元素的特殊情况===垂直居中

行内块元素的垂直居中对齐

默认的行内块元素是按照文本的基线形式对齐的

行内块元素的垂直居中对齐写法

vertical-align：middle 中线

vertical-align:baseline 基线

vertical-top:top 顶线

vertical-align-bottom 底线

4.行内块元素，默认下面会有3px的留白距离====基线形式对齐产生的

如何解决3px的留白问题的====图片为例

1）调整图片的垂直对齐方式

vertical-align：middle 中线

vertical-top:top 顶线

vertical-align-bottom 底线

2）转换元素类型

display：block

块与块之间是没有间距的

3）使用浮动，使用绝对定位/固定定位

overflow：hidden

5.元素类型：行内元素，块级元素，行内块元素

任何一个元素都遵循盒子模型的规则，都可以添加内边距和外边距

但是：行内元素，添加内边距的时候，只能实现左右的距离（撑开元素的位置），实现不了上下的距离（撑开元素的位置）

6.定位：

含义：让页面中的元素去某一个位置，或者是相对于某一个位置进行调整

属性：position

取值：

1）静态定位：普通文档流定位，元素默认的效果是纵向排列就纵向显示，横向排列就横向显示static

静态定位无论怎么添加偏移属性都不会让元素位置进行移动

默认值

没有参照物一说

2）相对定位：想对于自己的位置进行微调(10px左右)

relative

参照物为自己原来的位置，后面的元素不会受到影响

参照物为自己原来的位置

top：30px

left：30px

距离自己原来本身的位置，上面有30px 左边有30px的距离

3）绝对定位：（父子关系）

absolute

给子元素添加绝对定位，父元素没有添加任何的定位，这次子元素的位置调整是根据浏览器左上角body的位置进行调整有可能受到滚动条的影响

参照物为body左上角会受到滚动条的影响

top：100px；

left：100px；

距离浏览器左上角body位置，有水平垂直100px的距离

给子元素添加绝对定位，父元素添加了定位（相对），这次子元素的调整是根据父元素的左上角的位置进行调整的

参照物为父元素左上角

top：100px；

left：100px；

距离父元素左上角body位置，有水平垂直100px的距离

用来制作效果：轮播图，电梯层，和楼梯层效果

4）固定定位（）

fixed

始终是以浏览器窗户屏幕左上角进行位置的调整

参照物就是浏览器窗户不会受到滚动条的影响

能做：流氓广告，定位广告，楼梯层，电梯层效果，返回置顶点击返回，删除遮罩层

5）粘性定位

sticky

是相对定位和固定定位的一个结合体

实现滚动吸顶效果

五个定位要想让元素进行位置的改变的话，则需要给定位元素添加偏移属性

top=======距离上面

right=====距离上面

bottom====距离下面

left======距离左面

普通文档流定位：默认的元素排列方式

静态定位

-->

</body>

</html>

柠檬养乐多.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫