css概述五
十一.显示
1.显示方式
决定元素在网页中的表现形式(块级,行内,行内块,table) 语法: display: 取值: 1.display:block; 让元素以块级的方式显示 2.display:inline; 让元素以行内的方式显示 3.display:inline-block; 让元素以行内块的方式显示 4.display:table; 让元素以table的方式显示 5.display:none; 让元素隐藏,脱离文档流,不占位置 |
2.显示效果
显示/隐藏 visibility 取值:1.visible 默认值,可见的 2.hidden 隐藏 问题:visibility:hidden和display:none的区别 display:none脱离文档流,后续元素上前补位 visibility:hidden,不脱离文档流,虽然看不到,但是还占位置 |
3.透明度
opacity: 取值 0~1 1是不透明,0是全透明 问题:opacity和rgba的区别 opacity作用于元素,只要是颜色相关的属性都会改变透明度 rgba只会修改当前颜色的透明度 |
4.垂直对齐方式
vertical-align 一般只有两个地方使用 table中使用 取值 top/middle/bottom 设置table中的内容的 对齐方式 img中使用 设置图片与图片前后文字的垂直对齐方式 取值 top/middle/bottom baseline 基线 默认值 一般项目中通常会将所有的图片与文字垂直对齐方式, 更改为非基线对齐 |
5.光标
cursor: 默认值 default 小手 pointer 十字 crosshair 文本 text 等待 wait 帮助 help |
十二.列表的样式
1.列表标识项的样式
list-style-type 取值 1.disc 默认值 2.none 去掉标识项 3.circle 4.square |
2.列表项设置为图片
list-style-image:url(图片路径) |
3.列表项的位置
ul默认自带上下外边距(chrome解析16px) 自带左内边距(chrome解析40px) list-style-position 可以设置列表项在li里,或者设置列表在内边距里 取值 outside 默认值 在内边距里,在li外 inside 在li里 |
4.简写方式
list-style:type/url position; 最简方式,项目中使用最多的方式 list-style:none; |
十三.定位---相对,绝对,固定定位
position: 取值:1.static 默认,静态(默认文档流) 2.relative 相对定位 3.absolute 绝对定位 4.fixed 固定定位 当一个元素设置了position属性,并且取值为 relative/absolute/fixed其中一种时 这个元素被称为 已定位元素 已定位元素解锁了4个偏移属性 top: + ↓ -↑ right +← -→ bottom +↑ -↓ left +→ -← |
1.相对定位
position:relative; 配合偏移属性实现定位 相对定位,没有脱离文档流 如果相对定位元素,不写偏移属性,效果与没写定位是一样的,不影响任何布局,只是把这个元素变成了已定位元素 相对定位,相对自己原来的位置偏移某个距离 使用场合: 1.元素本身,位置微调(类似margin) 2.一般作为绝对定位的祖先元素 |
2.绝对定位
position:absolute; 配合偏移量使用 绝对定位,脱离文档流 绝对定位元素,如果祖先级没有已定位元素,那么就相对于body左上角,执行偏移量 绝对定位元素,会相对于离自己最近的,祖先级,已定位元素的左上角,进行偏移 绝对定位,由于脱离文档流,产生如下效果 1.页面不占据空间,后续元素上前补位 2.绝对定位的元素,会变成块级 3.没有写宽度元素,发生绝对定位以后,宽度靠内容撑开 |
3.固定定位
position:fixed; 配合偏移属性使用 将元素固定在页面上某个位置,不会随着滚动条滚动,发生变化 一直固定在页面的可视区域 特点:脱离文档流,位置始终相对body初始化 |
4.堆叠顺序
注意: 1.默认的堆叠顺序,html元素后写的堆叠顺序高 2.浮动和定位的堆叠顺序不是同一个体系,尽量避免在一起处理 3.手动调整堆叠顺序 z-index:整数 4.堆叠顺序对父子关系无效,儿子永远在爹的上面 5.只有已定位元素,可以设置堆叠顺序 |
css概述五的更多相关文章
- web—第四章css&第五章
web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...
- xhtml和css概述
Xhtml和css概述 1.html的过渡到xhtml html与xhtml不是两种语言,它们是一种语言的不同阶段,有点类似于文言文和白话文之间的关系.因为网络技术的日新月异,html的不断改进,所以 ...
- 一、CSS概述 二、CSS的选择器(认识) 三、CSS样式和属性(练习) 四、重构商城首页DIV+CSS(页面布局)(重点) 浮动/更改显示方式
一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...
- Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...
- Web前端:1、HTML&CSS概述及结构
万维网联盟(World Wide Web Consortium)简称W3C,专门为了定义网页相关的标准而成立,如网页中的HTML.CSS.DOM.HTTP.XML等标准. 根据W3C标准,一个网页主要 ...
- css的五种属性值----在路上(21)
在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值.对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围.在CSS中属性一般有以下几种 ...
- CSS概述<选择器总结>
概述:CSS是指层叠样式表,他是定义如何显示HTML元素,样式表通常存储在样式表中,通常存储在.css文件中,下面对css的选择器进行总结,便大家夯实基础! 1 语法规范: 每个样式规则有两个部分:选 ...
- python css概述
1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...
- 从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
随机推荐
- sqli lab less-5-6
less-5 基于报错的注入 基于报错可以爆出当前数据库名等等 id=2' and extractvalue(1, concat(0x7c,(select user())));-- # ?id=2' ...
- 从Mac中完全删除office
sudo sh -c "curl -s https://raw.githubusercontent.com/jimye/OfficeUninstall/master/office_unins ...
- Python(5)
把 aaabbcccd 这种形式的字符串压缩成 a3b2c3d1 这种形式. print(''.join({i+str(s.count(i)) for i in s})) dic={} for i i ...
- QT QLabel内容太长时候使用省略号
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/xiezhongyuan07/articl ...
- Net core项目实战篇01---EFCore CodeFirs For Mysql 数据库初始化
从今天开始我们用Net Core进行项目实战,采用微服务构架,因此你会看到我各模块开始都是用的web api.项目中的代码直接可以复制.费话不多说,现在就来跟我一起开始吧! 1.打开VS2017—&g ...
- slow-log 和bin-log相关参数介绍
1. slow-log show global status Slow_queries --------慢查询的次数,即查询的时间超过long_query_time设置的时间(不能修改) 配置文件 ...
- Golang-filepath使用
Golang-filepath 使用 获取当前目录 os.GetPWD() filepath.Abs(path) # 绝对目录 filepath.Dir(path) # 相对目录 可以 filepat ...
- Rust 1.31正式发布,首次引入Rust 2018新功能
Rust 1.31是第一个实现了Rust 2018独有新功能并且不保证与现有代码库兼容的版本.Rust 2018相关工作正在进行中,而Rust 1.31只是整个三年开发周期的开始,这个开发周期将对这门 ...
- python selenium(常用关键字)
1.文本按钮操作相关: send_keys()输入文本 from selenium import webdriver import time dr = webdriver.Chrome() dr.ge ...
- Shell脚本(二)数学运算
直接上代码. #!/bin/bash no1= no2= echo "using let ..." let result=no1+no2 echo "result is: ...