CSS常用标签，定位

display 属性设置元素如何显示。

text-decoration 属性规定添加到文本的修饰。

list-style属性，设置列表项标记的类型为空，即列表项前无标记。默认列表项标记的类型为实心圆，如果属性值设置为none，则可以去掉列表项标记例如无序列表。

我们发现对父级使用text-align:center; 会对行级块以及行级元素span有居中的效果。

div元素水平垂直居中
text-align: center;
我们发现对父级使用text-align:center; 会对行级块以及行级元素span有居中的效果。

<style>* {margin: 0 auto;padding: 0;}div{margin: 30px;padding: 0px;width: 300px;height: 300px;border: 1px solid #0000FF;font-size: 66px;水平方向居中 */text-align: center;
/* 内容的行高 */line-height: 300px;}</style>
</head><body><div>内容</div><div> <a href="">连接</a></div><div id="box03">选择器</div>
</body>

div图片水平垂直居中
display: table-cell;
vertical-align: middle;

 <style>* {margin: 0 auto;padding: 0;}div{margin: 30px;padding: 0px;width: 300px;height: 300px;border: 1px solid #0000FF;
<--水平方向居中-->
text-align: center;
display: table-cell;
vertical-align: middle;    }</style>
</head>
<body><div id="box01"><img src="./img/1.png" alt="" width="100px"></div>
</body>

背景图
background: url(./img/1.png) no-repeat;

  <title>背景图</title><style>* {margin: 0;padding: 0;}body{/* background-image: url(./img/1.png); *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; *//* background-repeat: no-repeat; *//* background-size: 2000px 1000px; */background: url(./img/1.png) no-repeat;/* background-size: 100% auto; */}</style>
</head><body>
</body></html><--背景图方式2  随浏览器边框大小自适应-->
<script type="text/javascript">window.addEventListener('resize',function (e) {let width = window.innerWidth;let height = window.innerHeight;window.document.body.style.backgroundSize = width + 'px ' + height + 'px';});
</script>

文本缩进
text-indent: 2em;

 <style>* {margin: 0;padding: 0;}div{margin-left: 100px;border: 1px solid #00FF00;}p{<！--首行字缩进 设置好宽度，会根据文字内容大小扩充div的高度--！>width: 200px;text-indent: 2em;}</style>
</head><body><div><p>行深般若波罗蜜多时， 照见五蕴皆空， 度一切苦厄。 舍利子， 色不异空， 空不异色， 色即是空， 空即是色， 受想行识， 亦复如是。 舍利子， 是诸法空相， 不生不灭， 不垢不净， 不增不减。 是故空中无色，无受想行识， 无眼耳鼻舌身意， 无色声香味触法， 无眼界， 乃至无意识界。 去第二段 去第三 无无明， 亦无无明尽， 乃至无老死， 亦无老死尽。 无苦集灭道， 无智亦无得。 以无所得故， 菩提萨埵，依般若波罗蜜多故， 心无罣碍， 无罣碍故， 无有恐怖， 远离颠倒梦想， 究竟涅磐。 三世诸佛，依般若波罗蜜多故， 得阿耨多罗三藐三菩提。 故知般若波罗蜜多， 是大神咒， 是大明咒， 是无上咒， 是无等等咒， 能除一切苦， 真实不虚。 故说般若波罗蜜多咒，即说咒曰：揭谛揭谛波罗揭谛波罗僧揭谛菩提萨婆诃。</p></div>
</body>

锚点文本

 <style>* {margin: 0;padding: 0;}a{text-decoration: none;          /*无修饰无下划线*/border: 1px solid #0000FF;      /* 设置边框*/display: block;                 /*显示为块级元素*/width: 400px;                   /*盒子宽*/height: 250px;                  /*盒子高*/text-align: center;             /*文字水平对齐*/line-height: 200px;             /*设置行高 */}</style>
</head><body><a href="">锚点文本</a>
</body>

图像居中锚点，表格化操作

 <style>* {margin: 0;padding: 0;}div{/*作为单元格显示*/display: table-cell;  width: 300px;height: 300px;border: 1px solid #0000FF;/*我们发现对父级使用text-align:center 水平居中; 会对行级块以及行级元素span有居中的效果。*/text-align: center;        /*vertical-align 属性设置元素的垂直对齐方式，middle居中 ，只对行内元素有效，对块内元素无效*/vertical-align: middle;    }</style>
</head><body>
<div><img src="./img/01.png" alt="" width="100px"></div>
</body>

图片透明度
opacity: 0.3；（0到1之间的小数）

    <style>* {margin: 0;padding: 0;}img {width: 400px;}#header02 {/* opacity为ID选择器设置图片02 的透明度，0到1之间的小数 */opacity: 0.3;}body {background: url(./img/01.png) no-repeat;background-size: 100%;}</style>
</head>
<body><img id="header01" src="./img/01.png" alt=""><img id="header02" src="./img/01.png" alt="">
</body>

浮动（左）
float: left;
清除浮动
clear: both;

 <style>* {margin: 0;padding: 0;}/* ul{float: right;} */ul>li {/*“是设置列表项目样式为不使用项目符号,这里指不用无序列表li的黑点。*/list-style: none;float: left;}ul>li>a {/*text-decoration 属性规定添加到文本的修饰,none取消链接下划线修饰。*/text-decoration: none;
/*块状元素*/display: block;         border: 3px solid #00FF00;width: 300px;height: 200px;
/*水平居中*/text-align: center;
/*行高*/  line-height: 200px;   }
/*清除浮动*/.clearfix{clear: both;}.nav_spacing{width: 30px;height: 200px;}</style>
</head><body><ul><li><div class="nav_spacing "></div></li><li><a href="">全部课程</a></li><li><div class="nav_spacing "></div></li><li><a href="">项目实战</a></li><li><div class="nav_spacing "></div></li><li><a href="">阿里云</a></li><li><div class="nav_spacing "></div></li><li><a href="">书籍</a></li><li><div class="nav_spacing "></div></li><li><a href="">在线题库</a></li></ul><!--清除浮动--><div class="clearfix"></div><img src="./img/3.png" alt="" width="300px">
</body>

隐藏 1
visibility: hidden;
1、visible:hidden— 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
2.visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。
3、在css中visibility属性规定元素是否可见，其中visible为元素可见，hidden为元素不可见

 <style>* {margin: 0;padding: 0;}img {width: 600px;}#header02 {/* visibility属性规定元素不可见*/visibility: hidden;}</style>
</head><body><img id="header02" src="./img/2.png" alt=""><img id="header03" src="./img/3.png" alt="">
</body>

隐藏 2
display:none
1、display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
2、display: none----将元素的显示设为无，即在网页中不占任何的位置。

   <style>* {margin: 0;padding: 0;}img {width: 600px;}#header03 {/* 将元素的显示设为无，即在网页中不占任何的位置。 */display: none;}</style>
</head><body><img id="header03" src="./img/3.png" alt=""><img id="header04" src="./img/4.png" alt="">
</body>

overflow :scroll
overflow 属性规定当内容溢出元素框时发生的事情。

<style>* {margin: 0;padding: 0;}body{overflow: hidden;}div {margin: 0 auto;width: 300px;height: 300px;border: 3px solid #00FF00;overflow: scroll;/* visible 默认值。内容不会被修剪，会呈现在元素框之外。hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。inherit 规定应该从父元素继承 overflow 属性的值。*/}</style>
</head><body><div><p> 行深般若波罗蜜多时</p></div>
</body>

绝对定位
position: absolute;
绝对定位是相对与父容器的位置定位

 <style>* {margin: 0;padding: 0;}img {width: 300px;}#container {width: 900px;height: 900px;border: 3px solid #871192;/*position: absolute;绝对定位 是相对与父容器的位置定位*/position: absolute;left: 150px;top: 150px;}#header02{/*position: absolute;绝对定位 是相对与父容器的位置定位*/position: absolute;left: 150px;top: 150px;}</style>
</head><body>
<!--div的定位父类是浏览器的边框 绝对定位-->><div id="container">
<!--img图片的定位父类是div边框 绝对定位-->><img id="header01" src="./img/03.png" alt=""><img id="header02" src="./img/04.png" alt=""></div>
</body>

相对定位
position: relative;
相对定位是相对自己原来的位置定位

<style>* {margin: 0;padding: 0;}img {width: 300px;}#container {width: 900px;height: 900px;border: 3px solid #871192;/*position: absolute;绝对定位 是相对与父容器的位置定位*/position: absolute;left: 100px;top: 100px;}#header02{/*position: relative;相对定位 是相对自己原来的位置定位*/position: relative;left: 150px;top: 150px;}</style>
</head><body><div id="container"><img id="header01" src="./img/03.png" alt=""><img id="header02" src="./img/04.png" alt=""></div>
</body>

固定定位
position: fixed;
元素的位置相对于浏览器窗口是固定位置。

<style>#header{/* 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：*/position: fixed;right: 150px;top: 150px;}</style>
</head><body><img id="header" src="./img/1.png"  alt=""><div style="padding-bottom:2000px;color: #FF6060;"><p>滚动我</p><p>来回滚动我</p><p>滚动我</p></div>
</body>

粘性定位
position: sticky;
基于用户的滚动位置来定位。

<style>#nav{/* 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。*/position: sticky;top: 100px;background-color: #00FF00;font-size: 30px;}
</style>
</head><body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<br><br><br><br><br><br><br><br>
<div id="nav">我是粘性定位!</div>
<div style="padding-bottom:2000px"><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p>
</div>
</body>

重叠元素
z-index: 10;
根据数值的大小判定位置的上下，必须有相对或绝对定位 position: ***，才能发挥作用

<style>* {margin: 0;padding: 0;}img {width: 600px;}#container {width: 900px;height: 900px;border: 3px solid #871192;/*position: absolute;绝对定位 是相对与父容器的位置定位*/position: absolute;left: 150px;top: 150px;}#header01 {/*重叠元素数值小在下 必须有定位*/z-index: 10;position: relative;}#header02 {/*重叠元素数值大在上 必须有定位*/z-index: 20;position: absolute;left: 150px;top: 150px;}</style>
</head><body><div id="container"><img id="header01" src="./img/01.png" alt=""><img id="header02" src="./img/02.png" alt=""></div>
</body>

过渡
transition: 2s;

 <style>* {margin: 0;padding: 0;}ul>li {list-style: none;float: left;position: relative;}ul>li>a {text-decoration: none;display: block;text-align: center;width: 150px;height: 50px;line-height: 50px;position: relative;z-index: 10;}ul>li>a:hover+img {/* display: block; */position: absolute;left:66px;top: 33px;/*过渡速度*/transition: 2s;}img {width: 100px;/* display: none; */position: absolute;top: -90px;left: 0px;z-index: 5;}</style>
</head><body><ul><li><div class="nav_spacing "></div></li><li><a href="">全部课程</a><img src="./img/03.png"></li><li><div class="nav_spacing "></div></li><li><a href="">项目实战</a><img src="./img/03.png"></li><li><div class="nav_spacing "></div></li><li><a href="">阿里云</a><img src="./img/03.png"></li><li><div class="nav_spacing "></div></li><li><a href="">书籍</a><img src="./img/03.png"></li><li><div class="nav_spacing "></div></li><li><a href="">在线题库</a><img src="./img/03.png"></li></ul><div id="" class="clear"></div>
</body>

animate动画效果插件
提前下载插件，

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>animate</title>/*外部连接到，css文件，就可以使用*/<link rel="stylesheet" href="./新建文本文档.css">
</head>
<body><img class="animate__animated animate__zoomIn" src="./img/01.png" alt="">
</body>
</html>

CSS常用标签·定位相关推荐

html与css常用标签大全
一,html+css基础 1-1 Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTM ...
HTML和CSS常用标签
[转载] 基本结构标签: <HTML>,表示该文件为HTML文件 <HEAD>,包含文件的标题,使用的脚本,样式定义等 <TITLE>---</TITLE&g ...
html css 常用标签,CSS/HTML 常用标签集合
常用标签集合 header.article.aside.section.footer.nav.h1-h6.p.ul.ol.li.img.dl.dt.dd-绝对路径.相对路径.标签语义化.标签嵌套规范. ...
（18）css常用样式—定位属性
一.定位属性position 前面我们已经了解过布局相关的盒模型.浮动等属性,而定位是另一种布局的重要属性,常用于制作压盖或者位置相关的效果. 属性名:position 属性值:relative 相对 ...
关于HTML+CSS常用标签
html:超文本标记语言 html语言结构: html:html的根标签 head:网页的头部信息 body:网页的主体部分 html注释: 常用的标签: 标题标签 ...
HTML/CSS常用标签属性及样式
1.常用布局样式: 参数描述 width 宽度 height 高度 background 背景颜色 border 边框 padding 内边距 margin 外边距 float 浮动 clear 清 ...
CSS简介及常用标签及属性
一.概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...
html，css，js简单介绍，html常用标签
目录简单介绍 HTML常用标签 1.html骨架标签 2.标题标签 3.段落标签 4.换行标签 5.文本格式化标签 6.div标签,span标签和pre标签 7.图像标签 8.超链接标签 9.注释标 ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...

CSS常用标签·定位

CSS常用标签，定位

CSS常用标签·定位相关推荐

最新文章

热门文章