建电商网站要多少钱,十大免费推广平台,培训网站建设方案模板下载,软件开发分为哪几类html
元素分类
块级元素 1.独占一行#xff0c;宽度为父元素宽度的100% 2.可以设置宽高
常见块级元素 h1~h6 div ul ol li dl dt dd table form header footer section nav article aside
行内元素 1.一行显示多个 2.不能设置宽高#xff0c;宽高由元素内容撑开
常见行内…html
元素分类
块级元素 1.独占一行宽度为父元素宽度的100% 2.可以设置宽高
常见块级元素 h1~h6 div ul ol li dl dt dd table form header footer section nav article aside
行内元素 1.一行显示多个 2.不能设置宽高宽高由元素内容撑开
常见行内元素 span a strong i em del sub sup
行内替换元素 img input video audio
img元素的默认样式是display: inline input元素的默认样式是display: inline-block
表格 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;}table,td,th {border: 1px solid #000;border-collapse: collapse;}td,th {width: 50px;height: 50px;}/style/headbodytablecaption表格标题/captiontheadth1/thth2/thth3/thth4/thth5/th/theadtbodytrtd rowspan4/td!-- 设置宽度为4个td的宽度防止合并单元格后看不出效果--td colspan4 stylewidth: 200px/td/trtrtd/tdtd colspan3/td/trtrtd/tdtd colspan3/td/trtrtd colspan4/td/tr/tbody/table/body
/html表单 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodyform actiondiv classnamespan姓名/spaninput typetext placeholder请输入 //divdivlabelspan男/spaninput typeradio namegender value1 checked //labellabel forfemale女/labelinput typeradio namegender value0 idfemale //divdivselect name id multipleoption value0大专/optionoption value1 selected本科/optionoption value2硕士/optionoption value3博士/option/select/divdivtextarea cols30 rows10 placeholder简介/textarea/divdivbutton typesubmit注册/buttonbutton typereset重置/button/div/form/body
/html
点击单选框文字时勾选
方式1 lable标签包裹整体:
labelspan男/spaninput typeradio namegender value1 checked /
/label方式2 lable for属性 单选框id:
label forfemale女/label
input typeradio namegender value0 idfemale /音视频
video src controls autoplay muted/video
audio src controls autoplay muted/audio回到顶部
a hrefjavascript:scrollTo(0,0)回到顶部/a平滑滚动
/* 滚动条平滑滚动
*/
html {scroll-behavior: smooth;
}自定义属性
div data-a1 data-b2/divconst divDom document.querySelector(div);
console.log(divDom.dataset);CSS
CSS引入方式
1.行内样式
span stylecolor: pink姓名/span2.内嵌样式在head的style.../style中书写样式 3.link:css 引入外部样式 4.import url() 引入外部样式
盒模型
怪异盒模型
标准盒模型 box-sizing: content-box; 尺寸 content(width) padding border margin
怪异盒模型 box-sizing: border-box; 尺寸 content(width padding border) margin
尺寸的百分比
百分比相对于元素的参考系 1.普通元素的参考系父元素的内容区域 2.定位元素的参考系为父元素中第一个定位元素的paddind区域
width、padding、border、margin 百分比相对于参考系的宽度 height 百分比相对于参考系的高度
margin-top与margin-bottom传递
margin-top传递
margin-top传递子元素的margin-top传递给父元素
发生的条件块级父子元素的顶部重叠 margin-bottom传递
margin-bottom传递子元素的margin-bottom传递给父元素
发生的条件 1.块级父子元素的底部重叠 2.父元素的高度为auto 解决margin传递方式
不使用margin使用padding会撑开盒子给父元素设置border父子不重合将父元素或子元素设置为display:inline-block触发BFC overflow:auto;
margin折叠
相邻块级兄弟元素垂直方向margin折叠 计算规则 1.都是正数或都是负数取绝对值最大的 2.有正有负代数和
解决折叠问题
只设置一个margin将父元素或子元素设置为display:inline-block
浮动
float:left/right/none
脱标元素变为块级元素display:block,可设置宽高向左紧贴着包含块或其他浮动元素的边界定位元素的层级高于浮动元素文字、行内级别元素环绕着浮动元素水平方向装不下浮动元素浮动元素向下移动直至有充足空间
浮动导致父元素高度坍塌问题 浮动元素脱离标准流不再占据原来的位置和尺寸导致父元素不能包裹子元素从而高度坍塌。
清除浮动
.clear_fix::after{content: ;display: block;/* clear 使伪类元素位于浮动元素的下面从而使父元素能正确包裹浮动元素,最终解决父元素高度坍塌问题left: 元素顶部低于之前所有左浮动元素的底部right: 元素顶部低于之前所有右浮动元素的底部both: 元素顶部低于之前所有浮动元素的底部none: 默认值*/clear:both;
}定位 position:
static 默认值
relative 相对定位 1.相对于自身 2.不脱离标准流移动后占据原来位置
absolute 绝对定位 1.相对于最近的有定位的祖先元素没有则相对于视口 2.脱标能设置宽高默认由内容撑开
fixed 固定定位 1.相对于视口 2.脱标能设置宽高默认由内容撑开
sticky 粘性定位 1.相对于最近的有定位的且包含滚动视口的祖先元素 2.没滚动到指定位置时不脱离标准流 3.滚动到一定阈值后变为固定定位fixed脱离标准流
z-index只对定位元素有效 1.兄弟关系 z-index越大层叠越上 z-index相等写在后面的元素层叠在上面
2.非兄弟 各自的最近的有定位的祖先元素比较 且定位的祖先元素有z-index数值
选择器与权重
选择器
id #box class .box 标签 div
属性选择器
img[属性]{} 有该属性
img[属性xxx]{} 属性值xxx
img[属性^xxx]{} 属性值以xxx开头
img[属性$xxx]{} 属性值以xxx结尾
img[属性*xxx]{} 属性值包含xxx 后代选择器ul li 子代选择器ulli 相邻兄弟选择器.box1 .box2.box1之后相邻的第一个.box2元素 所有兄弟选择器.box1 ~ div.box1之后的所有div元素 交集选择器 div.box 并集选择器 ul,ol
伪类选择器 用于选中处于特定状态的元素
动态伪类
:link
:visited
:hover
:active
:focus目标伪类
:target结构伪类
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type():first-child
:last-child
:first-of-type
:last-of-type:root
:only-child
:only-of-type
:empty否定伪类
:not()伪元素虚拟动态创建的元素只能添加在最后一个简单的选择器上
//默认为行内元素
::before{ content:必须有content属性;}
::after{ content:必须有content属性;}::selection{} //高亮选中文字::first-letter{} //选中块级元素第一行第一个字
::first-line{} //选中块级元素第一行全部文字权重
权重选择器的针对性越强权重越高!important 行内样式 id 类|伪类|属性 标签|伪元素 继承|通配符
无穷大 1000 100 10 1 0比较权重时应该作用到元素上。
相同权重时就近原则
!important选中元素时权重最高未选中元素时不影响就近原则
!important只针对单个css属性而不是一个选择器
!important被多个选择器设置时考虑选择器的权重#box1 #box2 p{} //(2,0,1)
#box1 div.box2 #box3 p{} //(2,1,2) 权重最大
.box1 .box2 .box3 p{} //(0,3,1)能继承的属性
文字、文本属性color font-* line-* text-* list 能被继承
继承的是计算值而不是设置值
.fa{font-size: 2em; /* 2x1632px */
}.son{/* son继承fa的font-size为32px 而不是设置值2em */
}强制继承
.son{border:inherit;
}属性值的计算过程
所有元素都会进行属性值的计算保证没有属性都有值
确定声明值浏览器默认样式和作者样式表中无冲突的值层叠冲突 2.1 作者样式表覆盖浏览器默认样式表 2.2 作者样式比较权重若权重相同就近原则继承对任然没有值的属性若可以继承则继承父元素的值 文字、文本属性color font-* line-* text-* list 能被继承 默认值对任然没有值的属性使用默认值
背景图与精灵图
精灵图 1.background-position 移动到图标位置 2.width、height 截取出图标大小
.sprite {background: url(./topbar.png) no-repeat -192px 0;width: 26px;height: 13px;
}vertical-align与行盒
行盒line-boxes包裹该行的所有行内级别元素
行盒内的行内级别元素默认基线baseline对齐
行高line-height是指行内文本的高度通常从一行文本的基线baseline到下一行文本的基线之间的距离。
vertical-align通常用来设置行内或行内块元素垂直方向的对齐
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.container {background-color: pink;}.container.box {display: inline-block;width: 200px;height: 500px;background-color: #bfa;}/style
/headbodydiv classcontainer!-- 行内级别元素--spanajdgajsdgasjdjasdkasjdkasjdh/spanimg src../images/doctor.jpg altdiv classbox/div/div/body/html给行内元素添加文字出现的现象
图片底部空隙解决
* {margin: 0;padding: 0;
}.container {/* 方式三 给父元素设置*//* font-size: 0; */background-color: pink;
}.containerimg{/* 方式一行盒内的行内级别元素对齐方式*//* vertical-align: top; *//* 方式二将行内级别元素img改为块级*/display: block;
}文本省略
单行文本省略
p {width: 100px;/* 单行文本省略*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}多行文本省略
p {width: 100px;/* 3行文本省略*/display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:verticaloverflow:hidden;text-overflow:ellipsis;
}居中
行内级别元素 img、input表单、文本 display: inline / inline-block
// 水平居中
text-align:center;// 垂直居中
line-height height块级元素 注有固定width属性
// 水平居中
margin: 0 auto;绝对定位元素 方式1 top:50% margin-top负值 垂直居中 left:50% margin-left负值 水平居中
.container {position: relative;width: 500px;height: 500px;border: 1px solid #000;
}.container.box {/* position: fixed; */position: absolute;width: 200px;height: 200px;background-color: pink;/* 相对于最近定位元素的50% */top: 50%;/* 向上移动自身高度px */margin-top: -100px;left: 50%;margin-left: -100px;
}方式2 top:50% translateY(-50%) 垂直居中 left:50% translateX(-50%) 水平居中
.container {position: relative;width: 500px;height: 500px;border: 1px solid #000;
}.container.box {/* position: fixed; */position: absolute;width: 200px;height: 200px;background-color: pink;/* 相对于最近定位元素的50% */top: 50%;left: 50%;/* 相对于自身50% */transform: translate(-50%,-50%);
}方式3 top,bottom:0 margin:auto 0; 垂直居中 left,right:0 margin:0 auto; 水平居中
.container {position: relative;width: 500px;height: 500px;border: 1px solid #000;
}.container.box {/* position: fixed; */position: absolute;width: 200px;height: 200px;background-color: pink;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}相对定位元素
relative的百分比数值相对于包含块relative的像素数值相对于自身
top:50% translateY(-50%) 垂直居中 left:50% translateX(-50%) 水平居中
.container {width: 500px;height: 500px;border: 1px solid #000;
}.container.box {position: relative;width: 200px;height: 200px;background-color: pink;top: 50%;left: 50%;transform: translate(-50%,-50%);
}flex居中
.container {display: flex;width: 200px;height: 200px;/* 主轴方向居中 */justify-content: center;/* 侧轴方向居中 */align-items: center;background-color: pink;
}背景图居中 背景大图居中:缩放浏览器背景始终居中显示
方式1
.box {height: 700px;background: url(./43619545307190.png) no-repeat center;
}方式2
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.box {height: 700px;overflow: hidden;}.box img {/* 1. 向右移动父元素宽的一半*/margin-left: 50%;/* 2. 向左移动背景图宽的一半*/transform: translate(-50%);}/style
/headbodydiv classboximg src./43619545307190.png alt/div
/body/html元素隐藏
display:none 不占据空间 visibility:hidden 占据空间 opacity:0 占据空间元素及其子元素都透明
最大最小宽高
PC端页面设置最小宽度通常为设计稿宽度
html {min-width: 1226px;
}图片设置最大宽度不超过容器
img {min-width: 100%;
}object-fit
object-fit 控制行内替换元素的适应方式 注audio video input img 等为行内替换元素
contain 在填充元素的内容框时保持其宽高比 元素的宽或高碰到边界时停止
cover 在填充元素的内容框时保持其宽高比 如果对象的宽高比与内容框不相匹配该对象将被剪裁以适应内容框
fill 元素将被拉伸以适应内容框。
none 元素将保持其原有的尺寸
CSS图形与动画
三角形 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box1 {width: 200px;height: 200px;border-top: 100px solid red;border-right: 100px solid blue;border-bottom: 100px solid green;border-left: 100px solid orange;}.box2 {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid blue;border-bottom: 100px solid green;border-left: 100px solid orange;}.box3 {width: 0;height: 0;border-top: 100px solid pink;border-left: 58px solid transparent;border-right: 58px solid transparent;}/style/headbodydiv classbox1/divdiv classbox2/divdiv classbox3/div/body
/html带边框的三角形
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;}.box {position: relative;width: 200px;height: 200px;border: 1px solid #000;}.box::after {position: absolute;left: 95%;top: 50%;margin-top: -10px;transform: rotate(45deg);content: ;width: 20px;height: 20px;border: 1px solid #000;border-left: none;border-bottom: none;background-color: #fff;}/style/headbodydiv classbox/div/body
/htmltransform形变
transform形变
只对块元素display:block;有效类似于相对定位relative形影分离不影响其他元素的布局
transform: rotate(x) 旋转角度 scale(x,y) 缩放 skew(x,y) 倾斜角度 translate(x,y) 移动 transform-origin 形变中心默认中心为元素中心位置
transition过渡
transition: 过渡属性 持续时间 函数 延时过渡属性一般过渡具有数值的属性
animation动画
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.ball {width: 50px;height: 50px;background-color: pink;border-radius: 50%;/* 2.使用css动画 *//* alternate 轮流交替 0%~100%100%~0% */animation: jump 0.5s infinite alternate;}/* 1.定义关键帧 */keyframes jump {0% {transform: scale(1.3, 0.7);}100% {transform: scale(0.7, 1.3) translateY(100px);}}/style/headbodydiv classball/div/body
/html布局
浮动布局
1.垂直方向由标准流排列使用块级元素 2.水平方向使用浮动float 清除浮动
flex布局
flex布局知识点
grid布局
