一。css的定位。
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
普通流:就是一般的元素的位置。
浮动:就是通过 float 这个属性进行设置。
绝对定位: 主要就是 position 这个属性。
二。float 属性的说明。
float属性主要是 left / right / none /inherit 这四个值。分别代表:浮动到左边,浮动到右边,不浮动,继承父元素的浮动。
一般浮动后需要清除上面的浮动,这样才会不影响下面的元素。浮动的清除 clear 属性。
clear:both(清除左右浮动),left(清除左浮动),right(清除右浮动),inherit(继承父元素),none。
三。绝对定位。主要就是同position的值进行处理的。
position:static ,relative ,absolute ,fixed。
static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute:元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed:一般用于固定在屏幕的某个地方。
上面的四个属性。经常需要用到后面的三个属性。只要有某个模块需要固定在屏幕的一个地方就一定用fixed。例如一个下拉导航,你就要用到relative,absolute。用relative固定导航,用absolute进行绝对定位导航下拉的值。
这就是一个下拉菜单。代码如下:
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative; /* 固定菜单 */
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute; /* 固定下拉的值 */
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
分享到:
相关推荐
有了这个就可以搞定很多事情 在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦
这是我自己学习html和css定位(position)时做的练习,仅供初学者学习参考,特别是对定位理解不熟悉的可以参考一下!
本人整理的css定位
详解css定位与定位应用,很棒的指南哦,让你知道css如何定位
什么是css定位?css定位怎么使用.docx
css基础教程--CSS快速入门、怎样编写CSS、CSS属性、CSS定位、CSS滤镜
div+css定位代码示例 说明了绝对和相对
css的绝对定位,相对定位,浮动的规则。等等等
div+css 定位浅析
1.05 css定位布局
借助CSS定位来实现,你将右下角的那个DIV放在另一个DIV里面,参考代码如下示: 复制代码代码如下: ”box1″> ”box2″>测试内容</div> </div> <style> <!– #box1{width:600px;height:600px;background:...
有关于css定位基础.txt
css定位布局.html
NULL 博文链接:https://chemzqm.iteye.com/blog/661513
CSS 定位网页元素
CSS属性之CSS定位[定义].pdf
css定位+动画.html
css定位的介绍大全.docx
有关CSS定位、隐藏的案例分享
网页css定位,滤镜 含有ppt课件+实例网页.