脚断整理——CSS篇之模块font\background\display\visibility\overflow

最新推荐文章于 2024-04-21 22:40:04 发布

YvonneJue

最新推荐文章于 2024-04-21 22:40:04 发布

阅读量129

点赞数

分类专栏：脚断系列——CSS

本文链接：https://blog.csdn.net/qq_42969437/article/details/89421927

版权

脚断系列——CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文字与字体相关

字体大小
font-size: 字体的大小;
取值: 取值单位;
字体粗细
font-weight: 字体粗细;
取值: normal bold 100-900
字体样式
font-style: 字体样式;
取值: normal italic
字体类型
font-family: 字体类型;
取值: “宋体”, “微软雅黑”…

字体简写
font: font-style font-weight font-size/line-height font-family;
特别注意：font-size 和 font-family 必须指定，其他的不需要可以不写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            font: normal bold 16px/40px "微软雅黑","宋体"
        }
    </style>
</head>
<body>
    <div>For Example</div>
    <div>For Example</div>
    <div>For Example</div>
</body>
</html>

文字对齐
text-align: 值;
取值: left right center;
首行缩进
text-indent: 值;
取值: 字体大小单位
文本修饰
text-decoration: 值;
取值: underline（下划线）, line-through（删除线）, overline（上划线）, none（无样式）；
行高
line-height: 值;
取值: 文字大小，多用于像素。
小技巧：如果将标签的高度和行高设置成一样的值，那么这个标签里的文字在这个标签里面就是垂直居中。（只限单行）
文字颜色取值
color: 十六进制 rgb() rgba();

背景

背景颜色
background-color: red;
取值: 十六进制 rgb rgba;
背景图片
background-image: url(图片路径);
背景平铺
background-repeat: 背景平铺;
取值: repeat（默认，平铺） no-repeat（不平铺） repeat-x（水平平铺） repeat-y（垂直平铺）
背景是否滚动
background: 滚动否
取值: scroll（默认值，背景滚动） fixed（固定背景）
背景位置
background-position: 背景位置
取值:
- right top left center bottom
- x像素 y像素
- 百分比

背景的简写
background: 背景颜色背景图片地址背景平铺背景滚动背景位置;
background: #fff url() no-repeat scroll center center;


	.container{
		width:1300px;
	}
	<div class="container"></div>

为了适应不同屏幕的尺寸，图片可作为背景图片进行处理：
盒子为: width:100%;
background-position: center 0;

Display 显示

display: none
display:none，不占文档流位置

display: inline
元素呈行内显示

display: block
元素呈块级显示

display: inline-block
元素呈行内块显示
<ul>元素加上 display: inline-block; 原本垂直的列表就可以水平显示了

小贴士：（摘抄菜鸟笔记）
块级元素（block）特性：独占一行，可调整宽度、高度、内边距、外边距
行内元素（inline）特性：与相邻行内元素同一行，不可调整宽度、高度、内边距的top/bottom（padding）和外边距的top/bottom（margin）。

块级元素有：
address、blockquote、center、dir、div、dt、fieldset、form、hn、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul、li

行内元素有：
a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var

visibility 可见

visibility: hidden 与 display: none区别：

display:none; 脱离文档流，不占空间；
visibility: hidden; 网页不可见，仍然占用空间。

overflow

overflow 属性用于控制内容溢出元素框时显示的方式。

取值：
overflow: visible 默认值。内容不会被修建，会呈现在元素框外
overflow: hidden 多余内容不可见
overflow: scroll 以滚动条形式显示
overflow: auto 如果内容超出显示框，则浏览器会显示滚动条
overflow: inherit 从父元素继承overflow属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            background-color:#eee;
            width:180px;
            height:100px;
            border: 1px solid #333;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        <p>这是文本内的内容,写长一点</p>
        <p>这是文本内的内容,写长一点</p>
        <p>这是文本内的内容,写长一点</p>
        <p>这是文本内的内容,写长一点</p>
        <p>这是文本内的内容,写长一点</p>
        <p>这是文本内的内容,写长一点</p>
        <p>这是文本内的内容,写长一点</p>
        <p>这是文本内的内容,写长一点</p>
      
    </div>
</body>
</html>