CSS续集+设计思路

CSS续集

基础选择器

基础选择器又包括：标签选择器、类选择器（.定义，class引用）、id 选择器（#定义，id引用）和通配符选择器（*定义）。

复合选择器

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

选择器

作用

特征

使用情况

隔开符号及用法

后代选择器

用来选择后代元素

可以是子孙后代

较多

符号是空格nav a

子代选择器

选择最近一级元素

只选亲儿子

较少

符号是大于 nav>p

并集选择器

选择某些相同样式的元素

可以用于集体声明

较多

符号是逗号.nav,.header

链接伪类选择器

选择不同状态的链接

跟链接相关

较多

重点记住 a{} 和 a:hover 实际开发

的写法（lv 包包 hao）

:focus 选择器

选择获得光标的表单

跟表单相关

较少

input:focus{} 记住这个写法

CSS 三个特性

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

样式不冲突，不会层叠

继承性原则

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承性；

body {

font:12px/1.5 Microsoft YaHei；

}

此时子元素的行高是：当前子元素的文字大小 * 1.5

优先级

由低到高

继承/* <标签选择器 < 类选择器 /伪类选择器 <id选择器 < 行内样式style <!important

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重,但不进位。

元素的显示模式

元素的显示模式：块元素，行内快，行内元素

块级元素

  1.  比较霸道，自己独占一行。

  2. 高度，宽度、外边距以及内边距都可以控制。

  3. 宽度默认是容器（父级宽度）的100%。

  4. 是一个容器及盒子，里面可以放行内或者块级元素。文字类的元素内不能使用块级元素

行内快

  1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。

  2. 默认宽度就是它本身内容的宽度（行内元素特点）。

  3. 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

行内元素

  1. 邻行内元素在一行上，一行可以显示多个。

  2. 高、宽直接设置是无效的。

  3. 默认宽度就是它本身内容的宽度。

  4. 行内元素只能容纳文本或其他行内元素。

元素显示模式转换

  • 转换为块元素：display:block;

  • 转换为行内元素：display:inline;

  • l转换为行内块：display: inline-block

背景属性

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

属性

作用

值

background-color

背景颜色

预定义的颜色值/十六进制/RGB代码

background-image

背景图片

ur(图片路径)

background-repeat

是否平铺

repeat/no-repeat/repeat-x/repeat-y

background-position

背景位置

length/position 分别是x和y坐标

background-attachment

背景附着

scroll（背景滚动)/fixed(背景固定)

背景简写

书写更简单

背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

背景色半透明

背景颜色半透明

background:rgba(0,0,0,0.3)；后面必须是4个值

盒子

组成：外边距、边框、内边距、和 实际内容

边框

border : border-width || border-style || border-color，细线边框语法：border-collapse:collapse;

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

圆角边框

  • 外边框圆角border-radius:length;参数值可以为数值或百分比的形式

  • 圆把数值修改为高度或者宽度的一半即可，或者直接写为 50%

内边距,以上为点

padding 属性用于设置内边距，即边框与内容之间的距离。上右下左：top,right,botton,left

外边距

  • margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

  • margin 简写方式代表的意义跟 padding 完全一致。

运用margin让块级元素水平居中

  • ① 盒子必须指定了宽度（width）。

  • ② 盒子左右的外边距都设置为 auto 。

  • ③ .header{ width:960px; margin:0 auto;}

  • ④ 常见的写法，以下三种都可以：

    • ⑤ margin-left: auto; margin-right: auto;

    • ⑥ margin: auto;

    • ⑦ margin: 0 auto;

  • ⑧ 注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

应用2：相邻块元素垂直外边距的合并
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

  1. 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

  2. 尽量只给一个盒子添加 margin 值。

嵌套块元素垂直外边距的塌陷

  • 可以为父元素定义上边框。

  • 可以为父元素定义上内边距。

  • 可以为父元素添加 overflow:hidden。

清除内外边距

* {

padding:0; /* 清除内边距 */

margin:0; /* 清除外边距 */

}

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

值

描述

h-shadow

必需。水平阴影的位置。允许负值。

v-shadow

必需。垂直阴影的位置。允许负值。 衣

blur

可选。模糊距离。

spread

可选。阴影的尺寸。

color

可选。阴影的颜色。请参阅CSS颜色值。

inset

可选。将外部阴影(outset)改为内部阴影。

文本阴影

text-shadow 属性

值

描述

h-shadow

必需。水平阴影的位置。允许负值。

v-shadow

必需。垂直阴影的位置。允许负值。

blur

可选。模糊的距离。

color

可选。阴影的颜色。参阅CSS 颜色值。

浮动（float）

选择器 { float: 属性值; }属性值=none、left、right

特点:1脱标、2顶端对齐，不具有原来位置、3行内块元素4浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。

清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

 清除浮动的方法

  • 额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style=”clear:both”></div>，或者其他标签（如<br />等）。注意： 要求这个新的空标签必须是块级元素。

  • 清除浮动 —— 父级添加 overflow，将其属性值设置为 hidden、 auto 或 scroll

  • 父级标签after伪元素

  • 父级标签双伪元素

定位

定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。

语法：选择器 { position: relative; }

定位 = 定位模式 + 边偏移

边偏移就是定位的盒子移动到最终位置。有top、bottom、left 和 right 4个属性。

边偏移属性

例

描述

top

top:80px

顶端偏移量，定义元素相对于其父元素上边线的距离。

botton

bottom:80px

底部偏移量，定义元素相对于其父元素下边线的距离。

left

1eft:80px

左侧偏移量,定义元素相对于其父元素左边线的距离。

right

right:80px

右侧偏移量，定义元素相对于其父元素右边线的距离

相对定位 relative

相对定位的特点：

1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

 绝对定位 absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

绝对定位的特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。

2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3. 绝对定位不再占有原先的位置。（脱标）

语法：

选择器 { position: absolute; }

绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。

② margin-left: -100px;：让盒子向左移动

脱标的盒子不会触发外边距塌陷

  • 浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

  • 绝对定位（固定定位）会完全压住盒子

子绝父相

子级是绝对定位的话，父级要用相对定位。

① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

② 父盒子需要加定位限制子盒子在父盒子内显示。

③ 父盒子布局时，需要占有位置

 固定定位 fixed

1. 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。

2. 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

定位特殊特性

绝对定位和固定定位也和浮动类似。

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

粘性定位=相对定位+固定定位

选择器 { position: sticky; top: 10px；}

粘性定位的特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）

2. 粘性定位占有原先的位置（相对定位特点）

3. 必须添加 top 、left、right、bottom 其中一个才有效

跟页面滚动搭配使用。 兼容性较差，IE 不支持。

定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

语法：选择器 { z-index: 1; }

  • 如果属性值相同，则按照书写顺序，后来居上

  • 数字后面不能加单位

  • 只有定位的盒子才有 z-index 属性

元素的显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来

 display 属性

  • display 属性用于设置一个元素应如何显示。

  • display: none ；隐藏对象

  • display：block ；除了转换为块级元素之外，同时还有显示元素的意思

  • display 隐藏元素后，不再占有原来的位置。

visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏。

  • visibility：visible ; 元素可视

  • visibility：hidden; 元素隐藏

  • visibility 隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来位置， 就用 visibility：hidden

如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）

设计思路

导航栏部分

  1. 用li放a，在CSS中li可以放float(a横向排列），盒子之间的关系；a 可以dispaly:block后处理a之间的距离，自身的背景，字体，文本设计

  2. 用li放a，在CSS中li中完成float(a横向排列），盒子之间的关系，自身的背景，文本设计，但是设计字体大小必须在a内

搜索框部分

  1. 设置两个盒子，一个放button，一个放文本框，浮动实现拼接

  2. 最后给搜索框左上，左下，右上，右下进行圆角设置

  3. 消除输入时弹出的黑框 input:focus-visible { outline:none; border:none; }

轮播图外观

  1. 里面先放一张图片。

  2. 左右两个按钮用链接，左箭头prev 右箭头next，用定位固定位置

  3. 底侧小圆点ul， 类名为 promo-nav。运用圆的知识点。

#培训阶段
CSS续集+设计思路
http://localhost:8090//archives/cssxu-ji-she-ji-si-lu
作者
文伊仪
发布于
2024年09月29日
许可协议