CSS之固定定位，绝对定位+负边距，双飞翼布局，属性选择器，伪类选择器补，状态伪类选择器，相邻全部兄弟选择器，取非选择器，em与rem，变形效果...
2024-06-11 10:27:04
固定定位：
绝对定位+负边距 ！！！！！！！！！！！！！！！！！！！超重要
负边距
双飞翼布局
属性选择器
伪类选择器 补
状态伪类选择器
相邻全部兄弟选择器
取非选择器
em与rem
变形效果
固定定位：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>#div1 {height: 1200px;background-color: red;}#button {height: 50px;width: 50px;background-color: yellow;position: fixed;bottom: 10px;right: 10px;}</style><title>固定定位</title>
</head>
<body><!--以页面为标准来定位--><a name="top"></a>
<div id="div1"></div>
<button id="button"><a href="#top">返回顶部</a></button>
</body>
</html>运行图：
绝对定位+负边距 ！！！！！！！！！！！！！！！！！！！超重要
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>#container {height: 500px;width: 300px;background-color: #878787;margin: 0 auto;position: relative;}#div1 {height: 100px;width: 100px;background-color: yellow;position: absolute;top: 50%;left: 50%;margin-top: -50px; /*这个50px取决于自身的height，而不是父容器*/margin-left: -50px; /*同上*/}</style><title>绝对定位+负边距 很重要！！！！！</title>
</head>
<body>
<!--1：父容器加相对定位2：给子元素添加绝对定位3：top left： 50%4：margintop（height），marginleft（width）取子元素的一半-->
<div id="container"><div id="div1"></div>
</div>
</body>
</html>运行图：
负边距
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>#div1 {border: 5px solid red;width: 400px;height: 50px;margin: 0 auto;}#div2 {height: 50px;background-color: #FFFF00;margin-left: -20px;margin-right: -20px;}</style><title>负边距</title>
</head>
<body><div id="div1"><div id="div2"></div>
</div></body>
</html>
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>#head {height: 150px;background-color: red;}#body {height: 300px;background-color: yellow;position: relative;}#foot {height: 150px;background-color: #0000FF;}#left {width: 20%;height: 100%;background-color: #FF6600;float: left;}#center {width: 60%;height: 100%;background-color: aqua;float: left;position: absolute;left: 20%;}#right {width: 20%;height: 100%;background-color: burlywood;float: right;}</style><title>双飞翼布局</title>
</head>
<body>
<div><div id="head"></div><div id="body"><div id="center">中</div><div id="left">左</div><div id="right">右</div></div><div id="foot"></div>
</div>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>/*1:^= div元素中id属性值以div开头的*//*div[id^='div']{color: #FF0000;}*//*2：$= div元素中id属性值以3结尾的*//*div[id$='3']{color: #FF0000;}*//*3：*= div元素中id属性值包含子串i的*//*div[id*='i']{color: #FF0000;}*//*4：= div元素中id属性值等于div1的，是完全匹配的*//*div[id='div1']{color: #FF0000;}*//*5： div元素中包含class属性的*/div[class] {color: #FF0000;}</style><title>属性选择器</title>
</head>
<body><div id="div1">这是第一个div</div>
<div id="div2">这是第二个div</div>
<div id="div3">这是第三个div</div>
<div id="forth">这是第四个div</div>
<div id="fifth">这是第五个div</div>
<div class="sixth">这是第六个div</div></body>
</html>效果自行参悟，
伪类选择器 补
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>/*nth-child：统计所有的子代元素，然后对匹配的元素生效*/#container li:nth-child(2n-1) {color: yellow;}/*nth-of-type：统计所有类型匹配的元素，然后生效*/#container li:nth-of-type(2n-1) {color: #FF0000;}</style><title>伪类选择器</title>
</head>
<body><ul id="container"><li>烟台大学<!--<ul><li>数学院</li><li>法学院</li></ul>--></li><li>鲁东大学</li><div>山东大学</div><li>烟台大学</li><li>青岛理工大学<!--<ul><li>汽车学院</li><li>计算机学院</li></ul>--></li>
</ul></body>
</html>
状态伪类选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>input:disabled {color: #FF0000;}input:enabled {color: yellow;}input:checked {outline: 1px solid red;}</style><title>状态伪类选择器</title>
</head>
<body><!--已知：link visited hover active-->
姓名：<input type="text" value="单身老男神" disabled<!--禁用-->><br>
密码：<input type="password"><br>
爱好：<input type="checkbox" checked>篮球
<input type="checkbox">网球
<input type="checkbox">网球</body>
</html>
相邻全部兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>/*相邻兄弟选择器*/#p2 + p {color: #FF0000;}/*相邻全部兄弟选择器*/#p2 ~ p {color: #0000FF;}</style><title>相邻全部兄弟选择器</title>
</head>
<body><p id="p1">1</p>
<p id="p2">2</p>
<p id="p3">3</p>
<p id="p4">4</p>
<p id="p5">5</p>
<p id="p6">6</p></body>
</html>
取非选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>/*p{color: #000000;}:not(p){color: #FFFF00;}*/ul li:not([id='li2']) {color: red;}</style><title>取非选择器</title>
</head>
<body><!--<p>1</p>
<p>2</p>
<p>3</p>
<div></div>
<a href="">5</a>
<span>6</span>--><ul><li>1</li><li id="li2">2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul></body>
</html>
em与rem
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>body {font-size: 75%/1.5 '宋体';}#div1 {font-size: 12px;}#div2 {font-size: 2em; /*与父元素字号挂钩 相对大小2倍*/}#div3 {font-size: 3rem; /*与根元素字号挂钩 根相对大小3倍*/}</style><title>em与rem</title>
</head>
<body>
<div id="div1">div1<div id="div2">div2<div id="div3">div3</div></div>
</div>
</body>
</html>
变形效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>div {width: 158px;height: 183px;margin: 0 auto;margin-top: 100px;border: 1px solid red;overflow: hidden;}/*动画过渡效果 属性如下：1：什么属性参与过渡效果2：过渡时间3：过渡的效果 4：指针放上去延迟n秒才动
*/img {transition: all 1s ease 1s;}img:hover {/*元素平移 x方向 y方向*//*transform:translate(100px,100px);*//*元素缩放*//*transform:scale(1.5);*//*元素二维旋转：1：rotatex：以x轴为中心旋转1：rotatey：以y轴为中心旋转*//*transform: rotate(180deg);*//*元素倾斜：1：skewx：以x轴为中心倾斜1：skewy：以y轴为中心倾斜*/transform: skew(30deg);}</style><title>变形效果</title>
</head>
<body>
<div><img src="../../img/f3_Android1.png" alt="">
</div>
</body>
</html>
转载于:https://www.cnblogs.com/haloxinghong/p/7248312.html
CSS之固定定位，绝对定位+负边距，双飞翼布局，属性选择器，伪类选择器补，状态伪类选择器，相邻全部兄弟选择器，取非选择器，em与rem，变形效果...相关推荐
- CSS相对定位,固定定位,绝对定位实例方法和实例
1CSS相对定位方法实例: 当容器的position属性值为relative时,这个容器即被相对定位了.相对定位和其他定位相似,也是独立出来浮在上面.不过相对定位的容器的top(顶部).bottom( ...
- CSS中固定定位、相对定位、绝对定位以及flex布局高效定位
CSS中固定定位.相对定位.绝对定位以及flex布局高效定位 一.固定布局 将元素固定到一个位置,不管屏幕怎样移动,元素的位置不移动. <style>body {height: 3000p ...
- html中fixed属性,css fixed固定定位属性
[实例介绍] css fixed固定定位属性 当容器的position属性值为fixed时,这个容器即被固定定位了.固定定位和绝对定位非常 相似,不过被定位的容器不会随着滚动条的拖动而变化位置.在视野 ...
- 负边距在布局中的使用
负边距即margin属性的值设为负值,在CSS布局中时一个很有用的技巧.值为正的场景很常见,大家都很熟悉其表现 当margin-top.margin-left为负值的时候,会把元素上移.左移,同时文档 ...
- 负边距在布局中的使用 BY:色拉油啊油
负边距即margin属性的值设为负值,在CSS布局中时一个很有用的技巧.值为正的场景很常见,大家都很熟悉其表现 当margin-top.margin-left为负值的时候,会把元素上移.左移,同时文档 ...
- CSS之固定定位、相对定位、绝对定位
一.相对定位 相对元素自身所在的原来的位置进行定位. 可以设置 left,right,top,bottom四个属性 效果:在进行相对定位以后,元素原来所在的位置被保留了,被占用了–>保留站位其他 ...
- 【CSS】固定定位示例 ( 屏幕左右两侧广告栏 | 开发要点分析 | 代码示例 )
文章目录 一.开发要点分析 二.代码示例 一.开发要点分析 实现下图样式 : 中间部分是网页内容 , 左右两侧是 固定广告栏 , 不管浏览器如何滚动 , 缩放 , 该左右两侧广告栏不变 ; 标签结构分 ...
- uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下 最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图 二.解决方法 1.让其在输入框获取焦点时隐藏 百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
- CSS 负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head><meta charset="UTF-8">&l ...
- 【CSS】固定定位-固定到版心右侧
position:fixed left: left50% margin-left:版心盒子宽度一半
最新文章
- 【C++ 语言】面向对象 ( 继承 | 重写 | 子类调用父类方法 | 静态多态 | 动态多态 | 虚函数 | 纯虚函数 )
- Codeforces 372 B. Counting Rectangles is Fun
- MySQL-日志二进制日志binlog初探
- android富文本图片自适应,Android 图片混排富文本编辑器控件
- WeChat生成授权的token：md5(随机字符串+时间戳+盐值)
- Linux服务器---安装bind
- PAT1053 住房空置率 （20 分）
- intel fpga 开发工具Quartus Prime 软件的安装，使用详细教程
- 语句作用_3分钟短文：Laravel模型作用域，为你“节省”更多代码
- 前端学习（3068）：vue+element今日头条管理-日期处理
- mysql数据库比较，各数据库不同之处
- 华为机试HJ108：求最小公倍数
- JAVA毕业设计后勤管理系统计算机源码+lw文档+系统+调试部署+数据库
- 【分享】深入浅出WPF全系列教程及源代码
- 计算机毕设应用型开题报告,毕设开题报告范文.doc
- 运维：你们 JAVA 服务怎么又又又又出问题了！内存降不下来！
- 互联网+大赛作品_“颂中国力量 绘美好梦想”全市中小学生互联网+书画大赛作品展示（十）...
- 线性代数(七) : 子空间的基与维数
- 成都启之航电商：抖音小店使用效果+性价比产品+直播
- 划词翻译 插件的安装教程 附下载链接【超简单】