软开寒假1.1
外边距特性
特性问题
1:兄弟关系,两个盒子垂直外边距与水平外边距问题
2。·父子关系,给子加外边距,但作用于父身上了,怎么解决?
解决:
1。子margin-top===>父的padding-top,注意高度计算
2。给父盒子设置边框
3.overflow:hidden
4,。加浮动
溢出属性
溢出属性(容器的)
说明:
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit
visible:默认值,溢出内容会显示在元素之外:
hidden:溢出内容隐藏;
scroll:滚动,溢出内容以滚动方式显示;
auto:如果有溢出会添加滚动条,没有溢出正常显示;
inherit:规定应该遵从父元素继承overflow属性的值。
overflow-x:X轴溢出;
overflow-y:Y轴溢出
nowrap:不换行
pre:显示空格,回车,不换行
pre-wrap:显示空格,回车换行
pre-line:显示回车,不显示空格,换行
省略号显示
省略号显示
说明:
text-overflow:clip/ellipsis;
clip:默认值,不显示省略号号(…);
ellipsis:显示省略标记;
当单行文本溢出显示省略号需要同时设置以下声明:
容器宽度:1.width:200px;
2.强制文本在一行内显示:white-space:nowrap;
3.溢出内容为隐藏:overflow:hidden;
4.溢出文本显示省略号:text-overflow:ellipsis;
div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
元素显示类型-块元素-行内元素-行内块元素
注:P标签里面只可以放文本,不可以放块级元素如div
padding左右支持,上下不支持
注:行内元素只可以设置左右间距,不可以设置上下边距
元素类型的互相转化:
将元素转为inlineblock实现导航栏的效果
如何实现如下图的菜单效果?
将其一开始
display:none
最后
.box:hover ul{display:block}
二级菜单
案例:
<style>
* {
list-style: none;
}
.box {
width: 300px;
margin: 0 auto;
}
.box .item {
float: left;
width: 120px;
text-align: center;
border: 2px solid blue;
background-color: aqua;
line-height: 40px;
}
.item:hover {
background-color: aquamarine;
}
.item ul {
display: none;
background-color: white;
color: black;
}
.item:hover ul {
display: block;
}
</style>
</head>
<body>
<ul class="box">
<li class="item">视频教程
<ul>
<li>全部视频教程</li>
</ul>
<ul>
<li>HTML</li>
</ul>
<ul>
<li>全部视频</li>
</ul>
<ul>
<li>html</li>
</ul>
</li>
<li class="item">认证考试
<ul>
<li>全部视频教程</li>
</ul>
<ul>
<li>HTML</li>
</ul>
</li>
</ul>
</body>
安利首页案例笔记
1.搜索框的最外圈一层boarder 在选中时的线叫做outline
参考代码:
outline:none
2.可以给最后一个图片加标签让他margin-right为0使他没有右边距
3.渐变色背景可以抓取1px最后当背景平铺
定位的属性与属性值
注:
static:静态(默认值) 不支持top的设置
absolute:有父元素的会以父元素为定位而不是浏览器第一屏
sticky:吸顶,参考京东主页后来固定的导航栏
注:粘性定位需要声明位置如:top:0px;
定位案例笔记
1、opacity:数值
(透明度 0-1)
2、改margin会导致盒子原本的大小改变,可能会导致无法与预期相同在同一行显示
解决方法:改变父容器大小或者单独设置最后一个块的大小
三角形案例笔记
<style>
div{width: 100px;height: 100px;
border-top: 20px solid red;
border-left: 20px solid blue;
border-right: 20px solid yellow;
border-bottom: 20px solid green;}
</style>
所以实现三角形的方法:
如红色,只要使宽度为0,最终会成为一个三角形
最后只需要使其他三个边框透明度为transparent
一个三角形由两条边框长度组成
例:
<style>
.box {
width: 100px;
height: 50px;
line-height: 50px;
text-indent: 20px;
background-color: aqua;
color: white
}
span {
width: 0;
height: 0;
display: inline-block;
border: 5px solid transparent;
border-top: 5px solid black;
position: relative;
top:2.5px;
}
.box:hover span{
border: 5px solid transparent;
border-bottom: 5px solid black;
top:-2.5px
}
</style>
</head>
<body>
<div class="box">
导航
<span></span>
</div>
定位的层级z-index
1.后来者居上
同为relative定位,后写的会覆盖掉前面的
解决方法
z-index:数值
z-index值越大,层级越大,越靠上显示
例子:
子容器想被父容器盖住只需要设置z-index:-1;
行内元素变为块元素方法
1.display:block;
2. absolute;
3. float:left;
定位控制元素水平垂直居中
position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px; (元素的自身的一半)
浮动与定位的区别
浮动:
定位:
浮动:半脱离
绝对定位:全脱离
锚点
锚点作用:页面不同区域的跳转 使用a链接
<a href="#锚点名字"></a>
<div id="锚点名字"><div>
精灵图
注意要设置块的大小才可以使其显示的正常
宽高自适应
注:
如果设置为百分之百的宽度,并不会自适应
如:
设置margin-left,会撑开网页的滚动条
而自适应会自动调整增margin使得占满整个窗口
**min-height:**设置最小高度,防止在内容太少的时候撑不开div
方法1的缺点:
解决方法:
让ul(父盒子)相对定位,让li(子盒子)绝对定位,但是要设置宽度与高度(因为脱离文档流后宽度由内容决定)
3.万能清除浮动法:
<style>
/*伪元素*/
div::first-letter{
font-size:30px;
color:
red;}
</style>
</head>
<body>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque,
fugiat assumenda, quisquam exercitationem blanditiis illum minus id ipsum
quasi et debitis! Delectus, voluptatem eveniet! Accusamus quasi culpa ipsum
quo et.</div>
</body>
</html>
让一个元素不显示的方法:display:None(不占位的隐藏)或者visibility:hidden(占位隐藏)
窗口自适应(移动端非常重要)
html body{height:100%}
两栏布局
法1.使其中一个浮动
另一个通过margin-left或者right在覆盖位置不进行布局
法2:
1.通过使第一个块浮动
2.通过calc函数实现 (减去第一个块的宽度)
三栏布局
1.通过浮动改margin
注意点:第三个块需要放在代码中间部分
否则的话
或者通过calc()函数
案例:
<style>
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.top,.bottom {
width: 100%;
height: 50px;
background-color: #ccc;
}
.middle {
height: calc(100% - 100px);
background:
yellow;
}
.left,.right{width: 100px;height: 100px;background-color: red;float: left;}
.center{width: calc(100% - 200px);height: 100%;background-color: aqua;float: left;}
</style>
</head>
<body>
<div Tclass="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center"></div>
<div class="right"> </div>
</div>
<div class="bottom"></div>
</body>
</html>