宽高自适应
width(宽度自适应应用于块级元素)
在网页布局中,给块级元素设置宽度为100%的时候,会自适应到浏览器全屏宽度(通栏效果)
块级元素不设置宽度的情况下,默认宽度为100%
块级不去设置宽度的时候,会和父级等宽
重要:如果当前元素脱离了文档流,元素的宽高大小由自身的内容决定
用到了定位(固定和绝对定位)或者浮动属性一定要给元素添加宽高大小
高度自适应
如果不设置容器高度,那么容器就不会显示在浏览器上
如果容器没有设置高度或者设置成auto的时候,高度会根据内容撑开,做到高度自适应
重点:子级元素自适应父级元素的高度
自适应浏览器高度:浏览器宽度默认为100%,高度默认为0 html,body{height:100%}
图片自适应到父级容器:img{width:100%;height:100%} 图片会被拉伸变形
重要的属性:**最小高度 min-height 网站的留言模块
作用:
当盒子没有内容的时候保持一个固定高度(height)
当盒子由内容的时候会根据内容的多少自动撑开盒子的高度(height:auto)
越好用的属性问题越多(兼容问题)
最小高度的兼容问题:只能在高版本浏览器中使用,低版本浏览器不兼容
下划线过滤器 写法:_属性:属性值 表示当前这个属性只能在低版本中使用
!important 最高权重
内联/行内样式表>id>class>标签
写法:属性:属性值 !important
高度塌陷/高度坍塌
造成高度塌陷的原因:父级没有设置高度,子级元素含有浮动属性
父级没有设置高度的原因:父级容器做到自适应
子级元素含有浮动属性:布局需求 脱离文档流 初始位置不存在 父级高度就不会被子级撑开
1.给父级添加高度 height:固定值
优点:从根本上解决了高度塌陷
缺点:不能做到自适应
2.给父级添加overflow:hidden
原理:使用了文本溢出属性,可以触发BFC(块级格式化上下文)在BFC中有一条布局规则(浮动元素也参与高度计算)
优点:好理解 ,可以解决高度坍塌
缺点:如果子级元素有超出父级区域的部分,会被隐藏起来
3.在当前最后一个子级元素后面添加一个任意标签,给这个标签设置clear:both属性
属性的解释:clear清除 left right both
优点:需要解决高度塌陷的时候,写标签和类名就可以
缺点:代码冗余,造成不必要的错误结构
4.万能清除法(只要求会用,不要理解)
用法:在父级上添加一个类名 clear-fix
再给这个类名添加声明
clear-fix::after{
content:‘’;
width:100%;
height:0;
display:block;
overflow:hidden;
clear:both;
visibility: hidden;
}
伪对象/伪元素
1.选择器:after{content:''} 表示在xx之后,必须要和content一起使用
2.选择器:before{content:''}表示在xx之前
3.first-letter 定义第一个文本样式
4.first-line 定义第一行文本样式
隐藏元素的方法
display:none 删除结构
visibility:hidden 删除了在页面中的显示文本 结构还是存在的
overflow:hidden 超出才可以隐藏元素
opacity:0(0~1) 背景颜色
面试题:伪类和伪对象(伪元素)的区别是什么?
伪类选择器:hover ,:link,:visited, :active
伪对象/伪元素选择器 ::before, ::after, ::first-letter, ::first-line
总结:两者的区别
1.写法上的区别
伪类:只有一个冒号
伪对象:两个冒号 在css2中两者都是一个冒号,后来为了区分伪类和伪对象的区别,在css3中规定了伪对象书写的时候要用两个冒号
2.功能作用
伪类:只能通过伪类改变元素的样式
原文地址:https://www.cnblogs.com/xsc1234/p/15168288.html
- Android Studio快捷键每日一练(6)
- Linux文本流
- Linux并发与同步
- Android Studio快捷键每日一练(5)
- 2017年移动行业五大发展趋势及2018年前景展望(下)
- 剑指OFFER之反转链表(九度OJ1518)
- Android Studio快捷键每日一练(4)
- Android Studio快捷键每日一练(3)
- 一分钟教你在博客园中制作自己的动态云球形标签页
- Python标准库06 子进程 (subprocess包)
- 摩拜、美团也伸手共享汽车拉!众多品牌里面,这三家最牛!
- Android Studio快捷键每日一练(2)
- Linux进程间通信
- Android Studio快捷键每日一练(1)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JDK 8 新特性 之 default关键字
- 设计模式 之 单例模式
- SpringBoot 配置多数据源
- git pull 报错:The following untracked working tree files would be overwritten by merge
- Docker 使用Dockerfile构建Docker(三)
- Docker-compose 安装与基本使用(四)
- Docker-compose 常用命令及网络设置(五)
- HashMap 源码分析
- Java 按位运算符(&,|,^,>>,<<,>>>)
- LinkedList 源码分析
- Logstash:多个配置文件(conf)
- ArrayList 源码分析
- IllegalArgumentException:argument type mismatch
- String equals()方法 源码分析
- centos7宝塔环境安装VeryNginx waf系统实现高级防火墙功能