html+css
文章目录
box-sizing
**定义:**属性允许您以特定的方式定义匹配某个区域的特定元素。(选定区域特定规则)
content-box这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box为元素设定的宽度和高度决定了元素的边框盒。
就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。font-family
定义:字体设置
overflow
定义:当内容溢出时抉择
none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 inherit 规定应该从父元素继承 text-decoration 属性的值。display
定义:规定元素应该生成的框的类型。
属性:
text-decoration
定义:文本修饰语(下划线,斜线)
none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 inherit 规定应该从父元素继承 text-decoration 属性的值。hover
**定义:**选择器用于选择鼠标指针浮动在上面的元素
提示::hover 选择器可用于所有元素,不只是链接。
提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。
注释:在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。
display: flex
定义一个容器(项目)
flex-wrap: wrap
flex-wrap属性 wrap换行,第一行在上方(横向轴)
响应式布局
/* 响应式布局当显示设备尺寸小于700px是,内容栏上下堆叠显示 */
@media screen and (max-width: 700px) {
.row{/* flex-direction属性决定主轴的方向(即项目的排列方向) */
flex-direction: column;/* column:主轴为垂直方向,起点在上沿 */
}
}
/* 响应式布局当显示设备尺寸小于400px是,导航栏上下堆叠显示 */
@media screen and (max-width: 700px) {
.navbar a{
float: none;
width: 100%;
}
}