列表、定位、css优先、剧中总结

简介: 列表样式列表样式可以设置其列表符号,列表图片(代替列表符号),列表符号的位置。list-style-type: 设置列表符号,可以是我们之前学的无序列表符或有序列表符。

列表样式

列表样式可以设置其列表符号,列表图片(代替列表符号),列表符号的位置。
list-style-type: 设置列表符号,可以是我们之前学的无序列表符或有序列表符。
list-style-image:设置列表的图片(此时list-style-type自动就无效了,被代替了)
list-style-position: 指将列表符放在li的里面还是外面:outside(外面,默认值),inside(里面)
list-style: 这是综合属性,可以设置上述几个。

定位属性:

定位就是指把元素(标签)放在哪个位置。
实际上,每个元素都有个定位属性:position。其有4个值:

  1. position:static ——静态定位;——所有元素的初始定位方式就是静态(没有额外使用position或浮动的时候)
  2. position:relative; ——相对定位:其实就是指一个元素在其父盒子中本来该放的位置(静态位置)的一个相对值(错位值)。必须使用left和top配合来设置该值。
    1.1 举例:position:relative; left:10px; top:15px;
  3. position:absolute; ——绝对定位;指该元素相对于其上级具有非静态定位的元素的一个绝对位置。如果上级没有非静态定位设置,则会相对网页主体(html标签)。常常绝对定位就是用于在整个网页上进行“绝对位置设定”——就是相对网页主体来说。
  4. position:fixed; ——固定定位;有点类似绝对定位,但其是相对于整个“可视窗口”来设置的定位,(绝对定位是相当于网页的版面的绝对值)。固定定位的盒子是以“窗口”为参照系,而绝对定位和相对定位的盒子是以网页为参照系。

标准流与非标准流:

流:水流的流——所有“水”(物体)往一个方向“流过去”——挤压。
标准流:就是原始的html标签在网页中的原始表现——在遵循块元素和行内元素的基础上,全都往“右上角”挤靠过去。
非标准流:使用position的非静态定位方式影响的元素位置,或者使用浮动而影响的元素的位置。

css优先级:

基本优先级:
!important 〉 行内样式 > id选择器 > 类选择器|伪类选择器 > 标签选择器 > 通用选择器 > 继承属性

综合优先级(只讨论选择器):
则下列选择器的优先级如何呢?
.a1 div{}
.a1 .a2{}
.a1 div .a2 span{}
#d1 div {}
#d1 .a1 {}
则他们比较优先级的原则是:

  1. 比较最高的优先级选择器的多少,多者胜;
  2. 最高的数量相等的时候,比较次高,多者胜;
  3. 依次类推

各种居中总结:

前提: 父盒子固定大小(宽高),其里面的“内容”在水平和垂直方向的居中对齐的常见做法:

  • 内部居中:
    1. 水平居中:
      A:“内容”为一行文字或文字性行内元素(span,a,b,u):在父盒子上设置text-align:center;
      B:“内容”为具有一定形状的行内元素(如img,input,textarea):同文字(A)
      C:“内容”为块元素: margin:0 auto;
    2. 垂直居中:
      A:“内容”为一行文字或文字性行内元素(span,a,b,u):在父盒子上设置line-height为父盒子的高度;
      B:“内容”为具有一定形状的行内元素(如img,input,textarea):同块元素(C)
      C:“内容”为块元素: 在块元素上设置:position:relative;top为父盒子高度一半;margin-top为该块元素高度一半的负值
  • 外部居中:
    img与textarea与其紧挨着的文字垂直居中对齐:设置其vertical-align:middle;
    input与紧挨着的文字自然垂直居中
相关文章
|
4天前
|
前端开发 容器
《CSS 简易速速上手小册》第2章:CSS 布局与定位(2024 最新版)
《CSS 简易速速上手小册》第2章:CSS 布局与定位(2024 最新版)
22 2
|
2天前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
4天前
|
前端开发
CSS列表
【5月更文挑战第4天】CSS列表。
14 3
|
4天前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
|
4天前
|
前端开发 开发者 容器
【专栏:CSS基础篇】CSS定位与布局:从静态到浮动、定位
【4月更文挑战第30天】本文介绍了CSS定位与布局的基础,包括静态、相对、绝对、固定定位以及浮动。静态定位遵循HTML顺序,相对定位可在正常位置基础上偏移,不占用额外空间。绝对定位基于最近已定位祖先元素定位,脱离文档流。固定定位相对于浏览器窗口定位,无视页面滚动。浮动用于文字环绕图片等,可能导致父元素高度塌陷。Flexbox布局提供更灵活的元素排列和对齐方式,适配各种复杂布局需求。理解并掌握这些布局技术能提升网页设计的灵活性和响应性。
|
4天前
|
前端开发 开发者
【专栏:CSS基础篇】CSS选择器详解:精准定位网页元素
【4月更文挑战第30天】本文介绍了CSS选择器在Web开发中的重要性,详细阐述了基础选择器(元素、类、ID、属性和伪类/伪元素)及复杂选择器(后代、子元素、相邻兄弟和一般兄弟)的用法。通过理解并巧妙运用这些选择器,开发者能更高效地控制页面样式,提高代码的可维护性。CSS预处理器如Sass、LESS进一步增强了选择器的功能,助力创建优雅且强大的样式表,实现精准的网页设计。
|
4天前
|
XML 前端开发 JavaScript
CSS中动画、过渡、定位、浮动的作用
CSS中动画、过渡、定位、浮动的作用
|
4天前
|
前端开发 容器
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
|
4天前
|
前端开发
CSS列表属性
CSS列表属性。
18 5
|
4天前
|
前端开发
css中定位有几种,有什么区别
css中定位有几种,有什么区别
13 3