css高级操作和常用操作

最新推荐文章于 2024-05-30 21:17:17 发布
十元的圈外男友
最新推荐文章于 2024-05-30 21:17:17 发布
阅读量141
点赞数
分类专栏：学习文章标签：定位 css html html5
本文链接：https://blog.csdn.net/weixin_50995831/article/details/109368818
版权
学习专栏收录该内容
37 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
float:浮动
值：left right
作用，可以让多个div内容变成一行
浮动注意 1.给元素加了浮动以后，当前的元素会脱离文档流
       2. 如果说两个或者多个同级别的元素左右排列的时候必须加上浮动
       3.当你设置浮动的时候，当子元素有浮动的时候，父元素必须设置高度
       否则高度塌陷

盒子模型
概念
包括什么：外边距 - margin 边框 - border 内边距 - padding 内容 - content
padding是边框之间的距离，如果想保持盒子大小不变，还要有一定距离怎么办？
如果你加了内边距，你就要减去盒子的宽或者高度
内边距设置值的方式：padding：10px 上下左右都加了10px
padding后跟4个值，可以单独调整上右下左，顺时针方向
padding-top 上
padding-bottom 下
padding-left
padding-right
盒子模型的一些相关属性
padding 不会对背景图造成影响


margin
1.margin在盒子的最外面
2.margin值的设置方式，其实与padding类似
内边距设置值的方式：margin：10px 上下左右都加了10px
margin后跟4个值，可以单独调整上右下左，顺时针方向
设置margin的时候，在父元素里面的第一个子元素后设置margin-top会拖拽父级
解决办法1）给父级设置浮动 2）给父级加padding-top
p标签在div里面统计并且上下排列的元素，之间的margin的值不会重叠
margin：0 auto  水平居中
margin：200px auto 上下200居中

总结：盒子模型很重要
怪异的盒子模型 - 需要box-sizing；border-box 触发
特点，padding值和border值都会在宽高之内，一般用于移动端

背景图定位技术 ： 属于网站优化的一部分
1.通过图片整合减少对服务器请求次数，提高加载速度
2.把n张小图合成一张大图
3.通过整合图片来减少图片的体积
4.使用background属性

第一步：先写一个宽高的色块（宽高就是你要定位的背景图的本身的宽高）
第二步：量这个图片左上角距离这个大图的x坐标（0坐标开始距离这个图片左上角的）
y坐标的距离（宽高）
第三步：如果你想让图片往上左走，就是负值 不会出现正值，最多是0

标签分类和元素分类
1.根据css显示分类，可以把html标签分为3大类
分别是
1.块标签 支持宽度，支持高度，自上而下排列，不受空格影响，一般用于其他元素的一个容器
如果说不给块标签设置宽高，默认是100%

2.行内标签
不支持宽高度，宽度高度根据内容撑开，受空格影响，从左到右排列，不会独占一行

3.行内块标签
支持宽高，受空格影响，不独占一行，从左到右排列支持宽高

总结：
块标签： div h1-h6 hr ul ol dl dt li form
行内标签: a b strong em span sup font label br
行内块标签: img textarea input

标签类型之间的相互转换
块标签转化：
行内：display：inline
行内块：display：inline-block
默认：display：block
行内标签转化：
默认是：display：inline
块：display：block
行内块：display：inline-block
行内块标签转化
默认：display：inline-block
块：display:block
行内：display：inline

标签之间的相互嵌套规则
1.块标签可以套行内标签，行内标签不可以套块标签（a标签可以套所有标签）
2.p标签不要套块属性的标签，可以套a span文本
3.标签相互嵌套的时候，要注意缩进

a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻

关于图片居中问题
1.图片在默认情况下，给父元素加上text-align：center 有作用
2.但是line-height 不能实现上下居中
3.使用vertical-align：middle 垂直居中属性
4.必须和display：inline-block一起使用，相互依赖共同存在

让一个元素在父元素里面上下左右居中
当前元素必须是inline-block
给当前的父元素加上text-align：center
给当前元素加上同级元素span，注意：不能加回车或者换行
给当前元素加上vertical-align：middle
给span标签添加vertical-align：middle，并且蛇者为inline-block，width=0


定位：
第一种：绝对定位 （position：absolute）
1）相对于已经定级的父级元素去定位
2）如果父级没有定位，就去找html根文档去定位
3）完全脱离文档流，不占位置
4）通过left，right，top，bottom去定位

第二种：相对定位  （position：relative）
1）相对于自身的默认位置定位
2）不脱离文档流，占有位置
3）主要作用是给绝对定位当爹使用，当参照物使用

绝对定位和相对定位的区别：参照物不同，相对定位不会对布局造成影响
注意：相对定位不会改变元素类型，但是绝对定位会把行内元素变成块元素
元素层级问题：z-index：value，value值越大元素越往前

第三种：默认状态 （position：static）
1）设置与不设置一样

第四种：固定定位  （position：fixed）
1.参照物是屏幕可视区
2.元素会变成块元素的特点
3.完全脱离文档流不占位置

怎么让一个元素，水平上下居中
第一种方式：选择器（position：fixed；top：50%；left：50%；margin-left：-宽度/2）
第二种方式：选择器（position：fixed；top：0；left：0；right：0bottom：0；margin：0）

元素层级问题
-1<普通元素<浮动元素<定位元素<z-index:1
子集高于父级，后写的高于先写的

锚点
就是超链接加上一个目标点

透明度的写法：opacity - 0到1之间的小数，0是完全透明
兼容ie低版本： filter：alpha(opacity=0-100) 0为完全透明


pc端宽高自适应
自适应的优点
1.元素自适应在网页布局中，非常重要，可以让网页显示更加灵活
2.可以根据不同设备，不同窗口，不同分辨率进行不同的显示
宽度自适应
第一种方式:  width：100%
第二种方式:  width不设置宽度(前提条件:必须元素是块元素)
高度自适应
第一种方式：  父元素根据内容多少发生变化， 设置方式为高度不给或者为高度auto
最小高度： min-height(让元素保持最小高度) _height 是hack写法 _ 指的是过滤器，只有ie6识别
或者写 height：auto！important 也可以兼容ie6
第二种方式： 让子元素根据父元素的变化而变化



清除浮动的方式：解决高度塌陷
第一种：overflow：hidden
第二种：给空白标签加clear：both
万能清除浮动的方法:
选择符：after{
    content：'';
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
    }
visibility:hidden  隐藏元素但是会占用位置
display：none  隐藏元素但是不占位置


-->
</body>
</html>