块元素居中：
方法一：先设置width: 100px, 再设置margin: auto;
方法二：
父元素：水平居中 text-align:center; 垂直居中 vertical-align:middle; display: table-cell;
子元素：display:inline-block; vertical-align:middle;
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<!-- css创建 -->
<p><b>注意：</b>如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式</p>
<!-- 边框清晰度 -->
border: 1px solid rgba(0, 0, 0, 0.1);
<!-- 边框弧度 -->
border-radius: 0 30px 30px 30px;
<!-- 文本阴影 -->
box-shadow: 2px 2px 12px #c0bbbb;
<!-- 禁用的图片 -->
{
opacity: 0.6;
cursor: not-allowed;
}
<!-- 翻转 -->
{
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);<!--加前缀以兼容老版本-->
}
<!-- textarea文本框属性 -->
{
resize: none不能调节尺寸, horizontal可调节宽度, vertical可调节高度, both都可调节
}
<!-- 控制在一行显示 -->
{
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow:ellipsis;
overflow: hidden;
}
<!-- flex布局 -->
{
display: flex;
justify-content: space-between; center;
flex-wrap: nowrap; wrap;
}
<!-- css背景 -->
<!-- 属性 -->
background-color (背景颜色): red; #e0ffff；rgb(0, 255, 115)
background-image: url('./image/color.jpg');
background-repeat: repeat-x (横向平铺); no-repeat (不平铺), repeat-x (纵向平铺)
background-attachment: fixed (图片固定不随页面滑动)
background-position: right top (图片放置右上角)
margin-right: 100px (文字在左显示，文本边缘离右边距离)
margin-left:
background-size: 100%; (背景图片宽度100%), 100px 100px;
<!-- 简写 -->
body {
background: #F2F2F2 url('img_tree.png') no-repeat fixed right top;
}
<!-- 文本 -->
<!-- 属性 -->
color (文字颜色): red; #e0ffff; rgb(0, 255, 115)
text-shadow (文本阴影): 12px 2px blue (文字，阴影，阴影颜色三个属性值都要有)
text-overflow:ellipsis;overflow:hidden; 超出显示省略号
vertical-align（文字显示位置): text-top(文字垂直向上对齐),super(上标字),sub(下标字),top(垂直向上对齐),middle(垂直居中对齐)
direction (文本正、倒序显示): rtl (文本倒序显示)
text-align (文本对齐): center; right; justify (每一行被展开为宽度相等，左，右外边距是对齐)
text-decoration (删除线): none (链接无下划线); overline (删除线在文本头上); line-through (删除线); underline (文本底部)
text-transform（大小写转换）：uppercase（单词转大写）；lowercase（单词转小写）；capitalize（单词首字母大写）
text-indent（文本缩进）:2em；50px
letter-spacing（指定字符间的间距）：2px；-3px
line-height（行与行之间的间距）：70%；200%
word-spacing（单词之间的间距）：20px
white-space（文本显示规则): nowrap (文字不会换行）；pre（按实际文本显示）；pre-wrap（保留空白符序列，但是正常地进行换行）；pre-line（合并空白符序列，但是保留换行符）
word-wrap:break-word; 自动换行
word-break:break-all; 强制英文单词断行（需要将行内元素设置为块级元素。）
<!-- 字体 -->
<!-- 属性 -->
font-family (字体系列): "Times New Roman",Times,serif; Arial,Helvetica,sans-serif;
font-style (字体样式): italic (斜体)
font-size (字体大小): 30px; 100%
font-weight (字体加粗): lighter (加细); bold 加粗 ；400 (400等于正常)
font-variant (单词转小型大写字体): small-caps
简写：
body {font:italic bold 12px/30px Georgia,serif;}
<!-- css链接 -->
a:link {background-color:#B2FF99; color:#000000; text-decoration:none;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {font-size:150%;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
a:link,a:visited {color:#00FF00;}
a.one:link {color:#00FF00;}
li a:hover:not(.active) {}
<p><a href="http://news.baidu.com/" target="_blank">这是一个链接</a></p>
<p> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果; a:active 必须在 a:hover 之后</p>
<!-- css列表 -->
<!-- 属性 -->
list-style-type(无序:ul,有序:ol): none（无列表图）:circle(圆），square（方框），upper-roman（罗马计数），lower-alpha（a,b,c）；cjk-ideographic（一,二）；decimal（1,2）
list-style-image（无序框内图）：url('sqpurple.gif')
<!-- 简写 -->
ul {list-style: square list-style-position url("sqpurple.gif");}
<!-- 表格 -->
<!-- 属性 -->
border-collapse: collapse（边框为无间隔）；
caption-side: bottom（表名在底端）
<!-- 例子 -->
<style>
table,th,td
{border:1px solid black;}
table {border-collapse: collapse; width:100%; height:150px;}
td {text-align:right; vertical-align:bottom; padding:15px;background-color:green; padding-top:5px;}
caption {caption-side:bottom;}
</style>
<q>collapse:边框为无间隔;bottom:文字在底端；padding：文字与边框距离;caption-side:bottom表名在底端</q>
<!-- 盒子模型 -->
<!-- 属性 -->
margin (外边距): 25px;auto（居中,配合width才有效）
border (边框): 25px solid green;
padding (内边距): 25px;
width (内容): 30px
<!-- css边框 -->
<!-- 属性 -->
border-style (边框风格属性):
border-top-style (单独设置顶边框的风格)
border-bottom-style
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset: 定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
none: 无边框
border-width (使用边框宽度，先使用 "border-style" 属性来设置边框) 5px; medium
border-left-width
border-color (使用边框颜色，先使用 "border-style" 属性来设置边框): #98bf21; red
border-right-color
<!-- 简写 -->
p {border:5px solid red;}
<!-- 轮廓 -->
<!-- 属性 -->
outline-style：solid（与边框属性一样）
outline-color：#00ff00
outline-width: 3px，thin，medium，thick，length
<!-- 简写 -->
outline: green dotted thick
<!-- margin外边距 -->
<!-- 属性 -->
margin:100px 50px（100px：上下；50px:左右间距）; 2cm ; 25%
margin-top
margin-bottom
margin-right
margin-left
<!-- padding填充 -->
<!-- 属性 -->
padding:25px 50px;
padding-top
padding-bottom
padding-right
padding-left
<!-- css元素尺寸 -->
<!-- 属性 -->
height: 100%；auto；200px
line-height（设置行高）
max-height（最大高度）
min-height（最低高度）
width: 100%；auto；200px
max-width
min-width
<!-- display与Visibility可见性 -->
<!-- 属性 -->
visibility:
hidden (元素被隐藏,但有占位)
visible (默认显示)
collapse (tr,td表格或表内容被隐藏)
display:
none (元素被隐藏，不占位)
inline (li列表水平显示)
block (使元素为块级元素)
inline-block (下拉菜单列显示)
<!-- 注意 -->
inline: 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)
和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
inline-block: 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
<!-- 定位 -->
position: 使用position来对齐元素时, 通常元素会设置 margin和padding
static: 默认
fixed: 独立与其他元素，不占空间;
sticky: 类似fixed但与其他元素重叠，需指定 top, right, bottom 或 left 之一
relative: 移动且占用原空间,和其他元素重叠
absolute: 不占空间,和其他元素重叠
left；top；bottom；right（位置）：-20px; 20px
z-index: -1（在重叠文本之后）
clip (裁剪): rect(0px,1500px,155px,0px);
overflow (内容溢出元素框): scroll(给出滚动条), hidden(隐藏), visible(溢出), auto(如果导航栏选项多,允许滚动)
overflow-x；overflow-y
<!-- 更改鼠标指针 -->
cursor: default(正常), text(输入), auto(输入), move(移动), pointer(手势), wait(转圈),
progress(转圈指针等待), help(帮助), crosshair(裁剪), e-resize(左右裁), n-resize(上下裁), ne-resize(左底裁), nw-resize(右底裁)
<!-- 浮动 -->
float: right, left
clear (元素两侧不能出现浮动元素): both, left, right
<!-- 边框 -->
box-shadow(阴影位置与透明度): 0px 8px 16px 0px rgba(0,0,0,0.2);
<!-- 图片透明/不透明 -->
opacity (透明度): 1; 0.4 (通常与 :hover 选择器一起使用，在鼠标移动到图片上后改变图片的透明度)
<!-- 阴影 -->
box-shadow: 10px 10px 5px #888888;
<!-- 边框圆角 -->
border-radius (为提示框添加圆角): 6px；15px 15px; 50%;
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
<!-- 选择器 -->
<!-- id例子 -->
#name { }
<!-- class例子 -->
.value{ }
<!-- 后代选择器 -->
div p{ }: 所有后代包括孙后代
<div>
<p>被选择</p>
<div>
<p>被选择</p>
</div>
</div>
<!-- 子元素选择器 -->
div>p{ }: 只选择子后代，不包括孙后代
<div>
<p>被选择</p>
<div>
<p>不被选择</p>
</div>
</div>
<!-- 相邻兄弟选择器 -->
div+p{ }: 选择紧接在div元素后的元素，且二者有相同父元素
<div></div>
<p>被选择</p>
<p>不被选择</p>
<!-- 后续兄弟选择器 -->
div~p { }: 选取所有div元素之后的相邻兄弟元素
<div></div>
<p>被选择</p>
<p>被选择</p>
<!-- 获取焦点元素 -->
input:focus {background-color:yellow; }
用户: <input type="text" name="lastname" />
div p:not(.sP): 选择div下类名非sP的所有子元素
.on1 p:first-child: 表示选择列表中的第一个标签
last-child: 表示选择列表中的最后一个标签
nth-child(2): 表示选择列表中的第2个标签
nth-child(2n): 表示选择列表中的偶数标签
nth-last-child(3): 表示选择列表中的倒数第3个标签
div p:first-of-type: 选择每个div父级的第一个p元素
last-of-type: 选择每个div父级的最后一个p元素
:nth-last-of-type(n)
<!-- 通用选择器 -->
*{color:red;}
<!-- css属性选择器 -->
[title]
[title=hello]
[title~=hello]
[lang|=en]
input[type="text"]
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
</body>
转载自：
https://blog.youkuaiyun.com/XiaoMing1998/article/details/88385477
flex布局进一步可查看：https://cloud.tencent.com/developer/article/1354252
以及
https://www.runoob.com/w3cnote/flex-grammar.html
扫一扫
8876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
