没有域名可以做网站,网站设计公司 推荐,网站建设与管理需要什么软件有哪些方面,网站建设模板pptHtmlCss 基础学习回顾总结
HtmlCss 基础总结#xff08;基础好了才是最能打的#xff09;一 HtmlCss 基础总结#xff08;基础好了才是最能打的#xff09;二 HtmlCss 基础总结#xff08;基础好了才是最能打的#xff09;三 HtmlCss 基础总结…HtmlCss 基础学习回顾总结
HtmlCss 基础总结基础好了才是最能打的一 HtmlCss 基础总结基础好了才是最能打的二 HtmlCss 基础总结基础好了才是最能打的三 HtmlCss 基础总结基础好了才是最能打的四 文章目录 HtmlCss 基础学习回顾总结前言结构伪类选择器伪元素选择器盒子模型盒子模型的组成部分盒子模型-边框线盒子模型-内边距盒子模型-尺寸计算盒子模型-外边距盒子模型-清除默认样式盒子模型-元素溢出外边距问题-合并现象外边距问题-塌陷现象行内元素-内外边距问题盒子模型 -圆角盒子模型 -阴影 最后 前言
这是作者的第五天总结篇章 有需要的小伙伴可以 在这里 找到上一篇文章 视频在这里~ B站黑马程序员视频
视频共15天作者会以天为粒度来分散到不同文章中有兴趣的小伙伴可以关注一下谢谢你 书中错误在所难免如果有小伙伴发现的话恳请斧正在此先谢过咯~ 本篇文章主要讲述结构伪类选择器和盒子模型
结构伪类选择器
根据元素的 结构关系 查找元素
例如
li:first-child{
//这个就是表示查找第一个元素
}
li:last-child{
//这个就是表示查找最后一个元素
}
li:nth-child{
//根据元素的结构关系查找多个元素
n 可以是2n,2n1, 5n 等类似于这种但是感觉用的不多
}
伪元素选择器
创建虚拟元素 用来摆放装饰性的内容
E::before{
contentbefore 伪元素 div p ;
}
E::after{
content:after 伪元素 div p
}注意的点是 必须设置 content 属性 用来设置伪元素的内容 如果没有内容则引号留空 伪元素默认的是行内显示模式; 权重和标签选择器相同
盒子模型
作用 布局网页 拜访盒子和内容
盒子模型的组成部分
盒子模型的重要组成部分
内容区域-设置宽高widht height内边距 -padding 出现在盒子和内容边缘之间外边距-margin 出现在盒子外面border 边框线 div{margin : 50px;border: 5px soild brown;padding:20px;width:200px;height:200px;bcbackground-color:pink;}盒子模型-边框线
属性名 borderbd 属性值边框线粗细 线条样式 颜色 不区分顺序 常用线条样式 soild 实线 dashed 虚线dotted点线 div{
border: 5px soild brown
width:200px;
height:200px;
bc:pingk;
}
当然也可以设置单方向边框线 属性名 border-方位名词 ,例如
div{
border-top:2px soild red;
border-right;
border-bottom
}盒子模型-内边距
作用设置内容 与 盒子边缘之间的距离 属性名称 padding/ padding-方位名词 以 像素值
div{
padding: 30px;
padding-top :10px;
... 不再赘述
}当然还有一个多值的写法 从上开始顺时针赋值 当前方向没有数值的时候则与对面的取值相同 div{
padding :30px;
padding:10px 20px 30px 40px;
}盒子模型-尺寸计算
蛋用
盒子模型-外边距
作用拉开两个盒子之间的距离 属性名margin 属性值与padding 取值相同
小技巧如果要版心居中 则左右的magin 值为 auto盒子要有宽度
盒子模型-清除默认样式
margin:0px
padding:0px;盒子模型-元素溢出
作用控制溢出元素的内容的显示方式 属性名overflow 属性值 hidden溢出隐藏 scorll 溢出滚动无论是否溢出都显示滚动条位置 auto溢出滚动溢出才显示滚动条的位置
外边距问题-合并现象
场景 垂直排列的兄弟元素 上下的margin会合并 其实不是合并是依照哪个大的值生效
外边距问题-塌陷现象
场景父子级别的标签 子级的添加上外边距会产生塌陷问题 现象子级别设置margintop那么父级别也会跟着往下走 解决办法 1.取消子级的margin 父级设置padding 2.父级设置overflow:Hidden 3.父级设置border-top
行内元素-内外边距问题
场景行内元素添加margin和padding 无法改变元素的垂直位置 解决办法 给行内元素添加line-height 可以改变垂直位置
span{
//margin和padding 属性无法改变垂直位置
margin50px
padding20px
//行高可以改变垂直位置;
line-height:100px 个人感觉用的很少这种方式很机械不灵活
}盒子模型 -圆角
属性border-radius 属性值数字px/百分比 提示属性值就是圆角半径 可以设置四个值值得取值方式跟margin padding一样
盒子模型 -阴影
作用 给元素设置阴影效果 属性名box-shadow 属性值 x轴偏移量 y轴… 知道有这么个东西用到的时候在查询一样的 最后
今天的学习也到此为止了希望大家都有所收获再见
