网页设计都有哪些内容 第1篇
(box-sizing: content-box|border-box|inherit;)
content-box（默认值）宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
inherit规定应从父元素继承 box-sizing 属性的值。
定义： Flexbox是一个一维的布局模型，它允许你轻松设计复杂的布局结构，而无需使用浮动或定位。
Flex容器（Flex Container）：设置了display属性为flex或inline-flex的元素。 Flex项目（Flex Items）：Flex容器的子元素自动成为Flex项目。 主轴（Main Axis）：Flex项目默认沿着水平方向的主轴排列（除非设置了flex-direction属性为column）。 交叉轴（Cross Axis）：与主轴垂直的轴称为交叉轴。
display：flex
flex-direction: row（横向排列） | row-reverse | column（垂直排列） | column-reverse
flex-wrap: nowrap（默认值，不换行） | wrap（自动换行） | wrap-reverse（以相反顺序自动换行）
justify-content: flex-start（从左向右排序） | flex-end（从右向左排序） | center（居中排列） | space-between （两侧对齐）| space-around（等分间距）
align-items: stretch（拉伸元素至适应容器） | flex-start（上边缘对齐） | flex-end（下边缘对齐） | center（横中线对齐） | baseline（第一行文本基线对齐）
order: 用来定义项目的排列顺序（数值越小，排列越靠前，默认为0） flex-grow: 用来定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 flex-shrink: 用来定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 flex-basis: 在分配多余空间之前，项目占据的主轴空间（默认值为auto，即项目的本来大小） flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
CSS选择器是用于选择样式化的HTML元素的模式。它们允许精确地定位页面上的元素，并应用样式规则。以下是一些常见的CSS选择器类型：
选择特定类型的HTML元素。 例如：p { color: red; } 将所有
元素的颜色设置为红色。
选择具有特定ID属性的HTML元素。 使用#符号。 例如：#main { width: 100%; } 选择ID为main的元素，并将其宽度设置为100%。
选择具有特定class属性的HTML元素。 使用.符号。 例如：.highlight { background-color: yellow; } 选择所有class为highlight的元素，并将其背景色设置为黄色。
选择页面上的所有元素。 使用*符号。 例如：* { margin: 0; padding: 0; } 将页面上所有元素的内外边距都设置为0。
选择具有特定属性或属性值的HTML元素。 例如：input[type=_text_] { color: blue; } 选择所有类型为text的元素，并将其文本颜色设置为蓝色。
网页设计都有哪些内容 第2篇
2 边框属性（border）
边框样式（border-style）：（none没有边框）（solid边框为单实线）（dashed边框为虚线）（dotted边框为点线）（double边框为双实线）
边框宽度（border-width）
设置边框颜色（border-color）：颜色的英文单词、十六进制颜色值或RGB模式rgb（r，g，b括号里是颜色色值或百分比）
内边距属性（padding）
外边距属性（margin）
*代表所有标签（通配符选择器）
让我的宽度包含边框和内边距和内容（box-sizing：border-box；）
3 背景颜色（background-color）（三种方式：直接写英文单词，rgb，十六进制颜色值） 4 背景图片（background-image）设置宽高 5 设置背景图像平铺（repeat沿水平和竖直两个方向平铺，no-repeat不平铺，repeat-x沿水平方向平铺，repeat-y沿竖直方向平铺） 6 设置背景图像位置（直接设置background-position：20px 20px，预定义关键字：水平方向值left center right，垂直方向值top center bottom，使用百分比） 7 设置背景图固定（background-attachment）俩属性（scroll图像随页面滚动，fixed图像固定在屏幕上不随页面滚动） 8 综合设置元素背景background：背景色 url（“图像”） 平铺 定位 固定
9 元素类型（块元素〈h1〉～〈h6〉、〈p〉、〈div〉、〈ul〉、〈ol〉、〈li〉） （行内元素〈strong〉、〈b〉、〈em〉、〈i〉、〈del〉、〈s〉、〈ins〉、〈u〉、〈a〉、〈span〉） 10 〈span〉标签 配合class属性使用 11 元素类型转换（display） inline行内元素 block块元素 inline-block行内块元素 none此元素将被隐藏不存在
12 颜色透明度 两种设置方法：rgba模式（r，g，b，alpha） opacity属性 opacity：参数 13 边框属性 14 阴影box-shadow属性共6个参数（h-shadow、v-shadow、blur、spread、color、outset/inset）
15 渐变（线性渐变和径向渐变） 线性渐变background-image：linear-gradient（渐变角度，颜色值1，颜色值2，...,颜色值n）
渐变角度：以deg为单位的角度数值或“to”加关键词
颜色值：颜色1为起始颜色，颜色n为结束颜色
径向渐变background-image：radial-gradient（渐变形状 圆心位置，颜色值1，颜色值2，...,颜色值n）
渐变形状：circle圆形径向渐变和ellipse椭圆形径向渐变 圆心位置：left和center和right和top和bottom 颜色值：颜色值1为起始颜色，颜色值n为结束颜色
重复渐变包括重复线性渐变和重复径向渐变 重复线性渐变background-image：repeating-linear-gradient（渐变角度，颜色值1，颜色值2，...，颜色值n） 重复径向渐变background-image：repeating-radial-gradient（渐变形状圆心位置，颜色值1，颜色值2，...，颜色值n）
1无序列表ul type属性值disc circle square 〈ul〉 〈li〉列表项1〈/li〉 〈li〉列表项2〈/li〉 〈li〉列表项3〈/li〉 ...... 〈/ul〉
2有序列表ol type属性（1，a或A，i或l）start（数字） value（数字） 〈ol〉 〈li〉列表项1〈/li〉 〈li〉列表项2〈/li〉 〈li〉列表项3〈/li〉 ...... 〈/ol〉
3定义列表dl（3个标签：dl，dt，dd） 〈dl〉 〈dt〉名词1〈/dt〉 〈dd〉是名词1的描述信息1〈/dd〉 〈dd〉是名词1的描述信息2〈/dd〉 ...... 〈dt〉名词2〈/dt〉 〈dd〉是名词2的描述信息1〈/dd〉 〈dd〉是名词2的描述信息2〈/dd〉 ...... 〈/dl〉
4定义列表实现图文混排
5列表嵌套的应用 〈ul〉 〈li〉列表项1〈/li〉 〈li〉列表项2〈/li〉 〈li〉 〈ol〉 〈li〉列表项1〈/li〉 〈li〉列表项2〈/li〉 〈/ol〉 〈/li〉 〈/ul〉
6 list-style-type属性（属性值disc,none,circle,cjk-ideographic,square,georgian,decimal,decimal-leading-zero,lower-roman,upper-roman,lower-alpha,upper-alpha,lower-latin,upper-latin,hebrew,armenian） 7 list-style-image属性 8 list-style-position属性（两种取值：inside和outside） 9 list-style属性 list-style：列表项目符号 列表项目符号的位置 列表项目图像； 10 背景图像定义列表项目符号
1创建超链接[属性：href和target（_self和_blank）] 〈a href=“跳转目标” target=“目标窗口的弹出方式”〉文本或图像〈/a〉 2锚点链接 3链接伪类控制超链接 4种状态：a：link,a：visited,a：hover,a：active
1认识浮动（选择器｛float：属性值；｝） float常用属性值：left标签向左浮动,right标签向右浮动,none标签不浮动（默认值） 2清除浮动（选择器｛clear：属性值；｝） clear常用属性值：left清除左侧浮动影响,right清除右侧浮动影响,both同时清除左右两侧浮动影响 使用空标签清除浮动（clear：both） 使用overflow属性清除浮动（overflow：hidden） 使用after伪对象清除浮动 after｛ display：block； clear：both； content：“”； visibility：hidden； height：0； ｝
overflow属性（选择器｛overflow：属性值；｝｛overflow－x/y：属性值｝） overflow常用属性值：visible内容不会被修剪，会呈现在标签框之外（默认值）；hidden溢出内容被修剪，且修剪内容不可见；auto在需要时产生滚动条，即自适应所要显示的内容；scroll溢出内容被修剪，且浏览器会始终显示滚动条
1 认识定位属性（定位模式 边偏移） 定位属性（选择器｛position：属性值；｝） position常用属性值：static自动定位、relative相对定位、absolute绝对定位、fixed固定定位 边偏移（属性取值为数值或百分比） 边偏移属性：top顶端偏移量、bottom底部偏移量、left左侧偏移量、right右侧偏移量 2 定位类型（静态、相对、绝对、固定） 静态定位position取值static（无法通过边偏移改变标签位置） 相对定位position取值relative（可以通过边偏移改变标签位置） 绝对定位position取值absolute 固定定位position取值fixed 3 z-index层叠等级属性（取值可为正整数、负整数和0，0为默认属性值，取值越大，定位元素在层叠元素中越居上） z-index仅对定位元素有效
网页设计都有哪些内容 第3篇
1 transition－property属性（属性值取值包括none、all和property） transition－property：none｜all｜property； 2 transition－duration属性 transition－duration：time； 3 transition－timing－function属性（常见属性：linear、ease、ease－in、ease－out、ease－in－out、cubic－bezier（n，n，n，n）） transition－timing－function：linear｜ease｜ease－in｜ease－out｜ease－in－out｜cubic－bezier（n，n，n，n）； 4 transition－delay属性（默认值0，常用单位秒s或毫秒ms，属性值可以为正整数、负整数和0） transition－delay：time； 5 transition属性 transition：property duration timing－function delay；
12D变形（4种变形效果：平移、缩放、倾斜、旋转） 平移 transform：translate（x－value，y－value）； 缩放 transform：scale（x－value，y－value）； 倾斜 transform：skew（x－value，y－value）； 旋转（单位deg，正数值顺时针旋转，负数值逆时针旋转） transform：rotate（angle）； 更改变换的中心点（transform－origin属性包含3个参数，默认值分别为50%、50%、0px） transform－origin：x－axis y－axis z－axis；