苏州网站网页设计,北京营销型网站建站公司,随州网站推广哪家权威,谁能推荐个网址选择器
结构伪类选择器
作用#xff1a;根据元素的结构关系查找元素
选择器说明E:first-child查找第一个E元素E:last-child查找最后一个E元素E:nth-child(N)查找第N个E元素(第一个元素N值为1)
nth-child(公式) 作用是可以根据元素的结构关系查找多个元素
偶数标签#x…选择器
结构伪类选择器
作用根据元素的结构关系查找元素
选择器说明E:first-child查找第一个E元素E:last-child查找最后一个E元素E:nth-child(N)查找第N个E元素(第一个元素N值为1)
nth-child(公式) 作用是可以根据元素的结构关系查找多个元素
偶数标签2n 奇数2n1 or 2n-1 之类的依次类推
找到第五个以后的所有标签 n5 第五个以前的所有标签是-n5
伪元素选择器
作用创建虚拟元素(伪元素) 用来摆放装饰性的内容
选择器说明E::before在E元素中最前面添加一个伪元素E::after在E元素中最后面添加一个伪元素
必须设置 content: 属性用来设置伪元素内容如果没有内容则引号留空即可伪元素默认是行内显示模式权重和标签选择器相同 stylediv::before {content: html;}div::after {content: js;}/style
/head
bodydivcss/div!--这是在css前后分别添加html和js--注意伪元素选择器创建出来的是行内元素宽高效果如果想修改显示需要转换成块元素
PxCook软件
PxCook(像素大厨) 是一款切图设计工具软件。支持psd文件
低代码工具
盒子模型
盒子模型是css技术所使用的一种思维模型。盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。每个矩形盒子都由内容、内边距、边框和外边距4个部分组成。除去内容部分其余每个部分又分别包含上、下、左和右4个方向方向既可以分别定义也可以统一定义。
我们生活中常见的手机盒子就可以看作一个盒子模型完整的手机盒子通常包含手机、内填充物和盛装手机的外壳。如果把手机想象成HTML标记那么手机盒子就是一个CSS盒子模型。内容就是盒子里装的手机内边距就是怕手机损坏得填充物边框就是盒子本身外部的壳外边距就是多个手机盒子排放时空的缝隙。
组成
盒子模型重要组成部分
内容区域 widthheight内边距 padding边框线 border外边距 margin
边框线
属性名border (bd)
属性值边框线粗细(数字px) 线条样式(solid -实线、dashed -虚线、dotted -点线) 颜色 (三个属性不区分书写顺序)
设置单方向边框线
属性名border-方位名词 (缩写方式:bd方位名词首字母)
top bottom left right 上下左右
属性值边框线粗细 线条样式 颜色 (不区分顺序)
内边距
作用设置内容与盒子边缘之间的距离
属性名padding
设置单方向内边距 同样是属性名-方位词
例如 顶部内边距 padding-top
多值写法
padding 复合属性写法 看下面表格
顺序是上右下左 top 、right 、bottom、left绕着盒子从top开始顺时针转取值如果数到当前方向没有数值取值就和对面的数值一样。
取值个数code说明一个值padding:10px四个方向内边距均为10px四个值padding:10px 40px 80px 40px上:10px ; 右: 20px; x下80px 左40px三个值padding: 10px 40px 80px上:10px ; 左右: 40px; x下80px 两个值padding: 10px 80px上下:10px ; 左右: 80px;
尺寸计算
默认情况
盒子尺寸内容尺寸 border尺寸 内边距尺寸
给盒子增加boeder / padding 会增加盒子尺寸 产生不必要的尺寸
解决方法 手动做减法内减模式box-sizingborder-box
外边距
作用拉开两个盒子之间的距离
属性名margin
注意与padding的属性值写法含义基本一样也同样可以定义单个方向的属性。
板心居中 margin: 0 auto
板心居中的前提是盒子必须要有宽度width 不然不会产生效果
清楚默认样式
清楚标签的默认样式
* {margin:0;padding:0;box-sizing:border-box;
}
!--先清楚所有标签内外边距并且设置内减盒子属性--元素溢出
作用控制溢出元素的内容的显示方式
属性名overflow
属性值 关键字
属性值效果hidden溢出隐藏scroll溢出滚动 (无论是否溢出都显示滚动条位置)auto溢出滚动 (溢出才显示滚动条位置
外边距问题
外边距合并问题
特定场景垂直排列的兄弟元素上下margin会合并
显示合并时取两个margin中较大值生效
外边距塌陷问题
特定场景父子级标签子级标签添加的margin-top会产生外边距塌陷问题
显示效果导致父级标签一起向下移动
解决方法 取消子级margin 父级设置padding父级设置overflowhidden父级设置boeder-top
行内元素-内边距问题
特定场景行内元素添加margin和padding 无法改变元素垂直位置
解决方法给行内元素添加line-height可以改变垂直位置
圆角效果
作用设置元素的外边框为圆角
属性名border-radius
属性值数字px / 百分比
属性值(圆角半径)
外边框有四个角 同样四个角可以单独取值 单个取值的写法同上文padding的格式从左上角开始顺时针书写数值 没有读取到数值的角与其对角的数值相同 常见圆角 正圆 将正方形盒子设置圆角属性值为宽高的一半or50% yuan {width:200px;height:200px;border-radius:100px;
}胶囊形状 给长方形盒子设置圆角属性值为盒子高度的一半 yuan {width:200px;height:100px;backfround-color: greenborder-radius:50px;
}注意圆角最大取值是50%超过50%不会变得更圆。
阴影
作用给元素设置阴影效果
属性名box-shadow
属性值x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意x轴偏移量 y轴偏移量 必须书写 不然阴影不会生效
默认是外阴影 内阴影需要添加inset
标准流
标准流也叫文档流指的是标签在页面中默认的排布规则
例如块元素独占一行行内元素可以一行显示多个。
就是网页中标签的默认显示模式 当不足以满足需求时再使用浮动或者flex布局
浮动
作用让块级元素在一行水平排列
属性名float
属性值 关键字 left(左对齐) 、right(右对齐)
特点顶对齐具有行内块级元素显示模式的特点
注意如果要设置块级元素浮动尽量全部设置 不然可能会出现 脱标效果 和强转行内块有异曲同工之秒 具体基础看code
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding:0;}li {list-style: none;}.product {margin: 50px auto;width: 1226px;height: 628px;background-color: pink;/* 版心居中的大盒子 */}.left {float: left;width: 234px;height: 628px;background-color: green;}.right {float: right;width: 978px;height: 628px;background-color: brown;}.right li {float: left;margin-right: 14px;margin-bottom: 14px;width: 234px;height: 300px;background-color: yellowgreen;}/* 第四个和第八个li 去掉margin-right 不然会掉出盒子 */.right li:nth-child(4n){margin-right: 0;}/* 因为父级的宽度不够 所以浮动的盒子回掉出盒子 *//style
/head
bodydiv classproduct div classleft/divdiv classrightulli/lili/lili/lili/lili/lili/lili/lili/li/ul/div/div
/body
/html清除浮动
特点场景浮动元素会脱标如果父级没有高度子级无法撑开父级高度(可能导致页面布局错乱)
解决方法清除浮动(清楚浮动带来的影响)、
方法一 额外标签法
在父元素内容的最后添加一个块元素设置CSS属性 clear:both 方法二 单伪元素法 .clearfix::after {content: ;display:block;clear:both;}方法三 双伪元素法(推荐) !--before是为了防止塌陷解决外边距塌陷问题--.clearfix::before,.clearfix::after{content: ;display: table;}!--after作用是清除浮动--.clearfix::after{clear: both;}方法四 overflow 父元素添加CSS属性 overflowhidden
浮动 -总结
属性 float left表示左浮动 、right表示右浮动
特点 浮动后的盒子顶对齐浮动后的盒子具备行内块的特点父级宽度不够浮动的子级会换行浮动后的盒子脱标 清楚浮动 子级浮动 父级没有高度子级无法撑开父级高度影响布局效果 双伪元素法
Flex布局
重点 学习
flex布局也叫弹性布局是浏览器提倡的布局模型非常适合结构化布局提供了强大的空间分布和对齐能力。flex模型不会产生浮动布局中脱标现象布局网页更加灵活简单
flex-组成
设置方式给父元素设置 displayflex子元素可以自动挤压或者拉伸
组成部分
弹性容器弹性盒子主轴默认在水平方向侧轴/交叉轴默认在垂直方向
弹性容器 displayflex里面的元素盒子叫弹性盒子 !--仅写css样式-- style/* 弹性容器 */.box {display:flex;height: 300px;border:1px solid #000;}/* 弹性盒子 */.box div {width: 200px;background-color: pink;}/styleflex -布局
描述属性create flex containerdisplayflex主轴对齐方式justify-content侧轴对齐方式align-items某个弹性盒子侧轴对齐方式align-self修改主轴方向flex-direction弹性伸缩比flex弹性盒子换行flex-wrap行对齐方式align-content
主轴对齐方式
属性名 justify-content
属性值效果flex-start默认值弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列center弹性盒子沿主轴居中排列space-between弹性盒子沿主轴均匀排列空白间距均分在弹性盒子之间space-around弹性盒子沿主轴均匀排列空白间距均分在弹性盒子两侧space-evenly弹性盒子沿主轴均匀排列弹性盒子与container之间间距相等
侧轴对齐方式
属性名
align-items 当前弹性容器内所有的弹性盒子的侧轴对齐方式(给弹性容器设置)align-self 单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)
属性值相同都是关键字
属性值说明stretch弹性盒子沿着侧轴线拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸则默认拉伸)center弹性盒子沿侧轴居中排列flex-start弹性盒子沿起点开始依次排列flex-end弹性盒子从终点开始依次排列
技巧在为单独的弹性盒子的时候可以配合结构伪类选择器选中某个特定的弹性盒子。
修改主轴方向
属性名flex-direction
属性值关键字
属性值效果row水平方向从左到右column垂直方向从上到下row-reverse水平方向从右向左column-reverse垂直方向从下向上
注意
修改主轴方向 为垂直方向 侧轴自动变换到水平方向主轴在垂直 垂直居中侧轴在水平 水平居中
弹性伸缩比
特点可以控制弹性盒子的主轴方向的尺寸
属性名flex
属性值数字 表示占用父级剩余尺寸的份数 权重
整数数字 控制权重 剩余空间的弹性盒子所占弹性容器的权重
弹性盒子换行
弹性盒子可以自动挤压或者拉伸默认情况下所有弹性盒子在一行显示
属性名 flex-wrap
属性值
wrap 换行nowrap 不换行 (默认)
行对齐方式
属性名align-content
属性值
属性值效果flex-start默认值弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列center弹性盒子沿主轴居中排列space-between弹性盒子沿主轴均匀排列空白间距均分在弹性盒子之间space-around弹性盒子沿主轴均匀排列空白间距均分在弹性盒子两侧space-evenly弹性盒子沿主轴均匀排列弹性盒子与container之间间距相等
注意此处显示的是 对行的对齐方式 对于单行的弹性盒子不生效
纸上谈来终觉浅 绝知此事要躬行
