当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

前端基础学习第十一天

2020-04-11 23:41前端开发基础 人已围观文章来源:成都SEO文章作者:小成站长

简介板块命名: review 评论 appraise:评价 info: 信息 没有宽度,高度,可以用padding 不会撑开盒子 总结: 1.布局为啥用不...

板块命名:
 
review 评论
 
appraise:评价
 
info: 信息
 
 
 
没有宽度,高度,可以用padding 不会撑开盒子
 
总结:
 
1.布局为啥用不同盒子,我只想用div?
 
原因:标签都是语义的,合理的地方用合理的地方。 产品标题就用 h, 大量文字段就用p
 
2.为啥用那么多类名
类名就是个每个盒子起一个类名,方便后期维护
 
3.到底用margin 还是padding 
 
根据实际情况  控制内容宽度用padding  盒子和盒子之间用padding 
 
4.自己做没有思路
 
先模仿,后面分析盒子布局
 
 
确定样式 写全面
---------------------------------------------------------
圆角边框
 
border-radius:10px;
 
设置圆形:
width: 100px;
height:100px;
 
border-radius:50%; 就是宽度和高度的一半 圆形
 
设置不同的圆角
border-radius: 10px 20px 30px 40px; 顺时针开始 左 上 右 下
 
盒子阴影
 
box-shadow :
 
h-shadow:水平阴影
 
v-shadow:垂直阴影
 
blur:阴影距离
 
spread 阴影尺寸
 
color 阴影颜色 rbga() 透明背景应用
 
inset 内部阴影 outse内部阴影
 
------------------------------------------
文字阴影
 
text-shadow: 
 
用法;和盒子阴影一样
-----------------------------------------
浮动:
 
传统网页布局的三种方式
 
css布局方式(PC端)
 
普通流(标准流)
 
1.块级元素会独占一行,从上向下排序
 
浮动
 
2.行内元素惠安找顺序,从做到有顺序排序,碰到父元素边缘则自动换行
 
定位
 
网页布局第一准则: 多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
 
--------------------------------------------------------
 
什么是浮动
 
float: 属性值
 
-------------------------------------
浮动的特性
 
1.浮动到指定的位置,俗称:脱标
 
2.浮动的盒子不在保留原先的位置
 
重点
1.如果多个盒子都设置了浮动,则他们属性值一行显示,并且顶端对齐排列
 
2.如果父级宽度装不下,多出盒子会另起一行对齐
 
3.浮动特性(重难点)
 
任何元素都可以浮动。不管原先什么模式的元素,添加浮动之后具有行内块元素相似的特性。
 
1如果块级盒子没有设置宽度,默认宽度和父级宽度一样宽,但是添加浮动后,他的大小根据内容来决定。
 
2.浮动的盒子中间是没有缝隙,是紧挨着一起的
 
 
浮动的而布局
 
 
3.行内元素同理
 
-----------------------------------------------
浮动元素经常和标准流父级搭配使用
 
1.标准流父元素排列垂直,浮动排列左右位置
 
-----------------------------------------------------
浮动元素经常和标准流父级搭配使用
 
网页布局第二准则:先设置盒子大小,之后设置盒子的位置
 
------------------------------------------------
 
浮动布局准则
 
1.浮动和标准流的父盒子搭配
 
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
 
2.一个元素浮动了,理论上其余的兄弟元素也要浮动
 
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
 
 
-----------------------------------------------
1.为什么要清除浮动
 
1.由于腹肌盒子很多情况下,不方便个给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面
的标准流盒子.
 
2.由于浮动元素不占用原文档流的位置,所以他会对后面的元素排版产生影响
 
 
----------------------------
清除浮动的本质
 
1.额外标签法:
 
在浮动元素的末尾添加空的标签.块级元素标签才能生效
<div class="clear"></div>
 
.clear {
clear: both;
}
---------------------------------------------------
 
2.清除浮动 -------------给父级添加overflow
 
给父级添加浮动
 
overflow: hidden;
 
优点:代码简洁
 
缺点:无法显示溢出的部分
 
 
--------------------------------------------------
清除浮动-------:after 伪元素清除浮动
 
给父元素添加
 
.clearfix:after{
    content:""; /*设置内容为空*/
    height:0; /*高度为0*/
    line-height:0; /*行高为0*/
    display:block; /*将文本转为块级元素*/
    visibility:hidden; /*将元素隐藏*/
    clear:both; /*清除浮动*/
}
.clearfix{
    zoom:1; /*为了兼容IE*/
}
————————————————
清除浮动-------------双伪元素清除浮动
 
.clearfix:before,.clearfix:after{
   content:"";
   display:table;//转换为表格
}
.clearfix:after{
  clear:both;
}
.clearfix{
  *zoom:1;
 
---------------------------------------------
清除浮动总结
 
为什么清除浮动
 
1.父级没高度
 
2.子盒子浮动了
 
3.影响下面布局了,我们就应该清除浮动了
 
------------------------------------------------------
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

本栏推荐

标签云

站点信息

  • 文章统计96篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们