css笔记二-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_73986726/article/details/142716485

三.定位和隐藏

1.常见图片格式

2.样式命名

学成在线首页

头部

header

版心w

logo

nav

search

user

所有a{

text-decoration:none;

}

header下的nav(重新设置一下)

广告

banner

w 版心

subnav 侧导航栏

course

(h2

h4

p

div more)

精品推荐

goods w

h3

ul li

a mod 修改

主体

box w

box-hd(h3,a)

box-bd（img，h4,div(info详细信息)）

底部

footer

copyright版权

（img，p,a(app))

links链接组

(dl,dt,dd)

3.定位

3.1定位缘由

3.2 定位组成

1 定位模式position

值	语义
`static`	静态定位
`relative`	相对定位
`absolute`	绝对定位
`fixed`	固定定位

静态定位static(很少使用)

语法：

 选择器 {position: static;}

相对定位relative(重要)

语法：

选择器 {position: relative;}

绝对定位absolute(重要)

语法:

选择器 {position: absolute;}

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

固定定位fixed(重要)

语法：

 选择器 {position: fixed;}

粘性定位sticky(了解）

语法：

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

定位总结

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	很少
relative相对定位	否（占有位置）	相对于自身位置移动	常用
absolute绝对定位	是（不占有位置）	带有定位的父级	常用
fixed固定定位	是（不占有位置）	浏览器可视区	常用
sticky粘性定位	否（占有位置）	浏览器可视区	当前阶段少

2边偏移

边偏移属性	示例	描述
top	top: 80px;	顶端偏移量，相对于父元素上边线的距离
bottom	bottom: 80px;	底部偏移量，相对于父元素下边线的距离
left	left: 80px;	左侧偏移量，相对于父元素左边线的距离
right	right: 80px;	右侧偏移量，相对于父元素右边线的距离

3.3定位叠放次序z-index

语法：

 选择器{z-index: 1;}

3.4定位拓展

1.绝对定位的盒子居中

2.定位特殊特性

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

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

4.网页布局总结

5元素的显示与隐藏

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

5.1 display显示隐藏元素（重要）

display隐藏元素后，不在占有原来的位置；display重点是隐藏不是消失

5.2 visibility显示隐藏

5.3 overflow溢出显示隐藏

属性值	描述
visible	默认，不剪切内容也不添加滚动条
hidden	超出的部分隐藏掉
scroll	溢出的部分显示滚动条，不溢出也显示滚动条
auto	溢出的部分才显示滚动条，不溢出不显示滚动条

但是有定位的盒子，请慎用overflow: hidden;因为它会隐藏多余部分。

5.4总结

四.css高级技巧

1.精灵图

目的：

核心原理：

使用：

总结：

向盒子中插入图片，图片默认是贴着盒子左上角的，需向上或向左移动来得到我们想要的。

2.字体图标

字体图标（Font Icons）是一种使用字体文件（如字体文件格式 TTF、WOFF 或 SVG）来呈现图标的技术。这种方法与传统的位图图标（如 PNG 或 JPEG）不同，因为它们基于矢量图形，这意味着字体图标在缩放时不会失去清晰度。

产生：

优点：

总结：

2.1字体图标的下载

推荐网站：icomoon字库 SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon

进入网站，点击Icomoon App挑选字体

阿里iconfont字库 iconfont-阿里巴巴矢量图标库

2.2字体图标的引入

字体声明，代码在style.css中

4.给span指定字体

2.3字体图标的追加

3.css三角

为了照顾兼容性（ line-height: 0; font-size: 0;）

4.css用户界面样式

4.1鼠标样式 cursor

 li {cursor: pointer;}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

4.2轮廓线 outline

 input {outline: none;}

4.3防止拖拽文本域 resize

实际开发中，我们的文本域右下角是不能拖拽的

 textarea {resize: none;}

textarea小细节：

写一行上

   <textarea name="" id=""></textarea>

5.vertical-align属性应用（只有行内元素和行内块元素有vertical-align属性）

语法：

 vertical-align: baseline | top | middle | bottom

值	描述
baseline	默认。元素放置在父元素的基线上
top	元素顶端和行中最高元素顶端对齐
middle	把元素放置在父元素中部
bottom	元素顶端与行中最低元素的顶端对齐

5.1图片，表单和文字对齐

5.2解决图片底部默认空白缝隙问题

推荐使用第一种解决方法

6.溢出的文字省略号显示

6.1单行文本溢出显示省略号

6.2多行文本溢出显示省略号

注意：要想使用这个效果，严格控制盒子多高多宽。

7.常见的布局技巧

7.1 margin负值的应用

 <style>
         ul li {
             list-style: none;
             float: left;
             width: 200px;
             height: 100px;
             border: 1px solid red;
             margin-left: -1px;
         }
         ul li:hover {
             border: 1px solid rgb(238, 162, 31);
             position: relative;
         }
     </style>
 </head>
 <body>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
     </ul>
 </body>

1.让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框。

实现：

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）

7.2文字围绕浮动元素

7.3行内块的巧妙应用

7.4 css三角强化

简化代码：

 width: 0;
 height: 0;
 /* background-color: transparent skeyblue transparent transparent; */
 border-top-color: transparent;
 border-right-color: skeyblue;
 border-style: solid;
 border-width: 22px 8px 0 0;

8. margin和display在布局时会相互影响，具体规则是什么？

块级元素：
- 当元素的 display 属性设置为 block 时，外边距会在元素之间合并。
行内元素：
- 行内元素的外边距只会影响元素的左右空间，而不会影响上下空间。
行内块元素：
- display: inline-block 的元素可以同时享受行内元素的特性（可以并排显示）和块级元素的特性（可以设置宽高和外边距），外边距不会合并。