7.18

经过详细计算,发现自己做饭吃才是最具有性价比的事情,既可以省钱,又可以随时能吃。(主要是省钱,哈哈)在食堂吃早饭,一碗豆浆,一个鸡蛋,一个包子,5块钱,中午两菜一荤12块钱,晚上一般都随便吃点,大概在10元左右,这一天下来就吃饭都得27左右了,买个小锅,又买了些鸡蛋,之后准备买点面条,可以自己做,这一天下来得省不少钱。今天楼上的师傅又在装修了,不过不是在装修地面了,在装修卫生间,声感游戏也准时开始了。

今天,其实也没讲多少。

1.solid 实线,dotted点线,dashed虚线

2.去掉列表上的小圆点 line-style:none;

3.行内元素:a img input  span i em  label

  块元素:h1-h6 div ul ol dl p

  行内块:img  input  td

以上3点经常会忘........

1.塌陷:塌陷就是对子盒子设置 margin-top 后,父盒子也会跟着一起下来的情况。

        解决办法:1.对父盒子设置上边框(边框颜色transparent透明)2.对父盒子设置上外边距 3.对父盒子设置overflow:heidden

2.浮动:网页的布局方式:普通流(流式加载),浮动,定位

              通过浮动,可以使得块元素在同一行显示;通过块级元素转换成行内块元素后,网页显示会有空隙,这是因为代码换行导致,所以弃用元素显示模式的转化。

            如对5个div需要在一行显示,则对5个div都需要添加浮动(一浮动,都浮动)

脱标:元素一旦进行浮动就会脱离原先的流式加载,并且不会保留原来的位置,后边的元素可以上位。脱标的元素有行内块元素的特性(在一行显示多个,可以设置宽高)。

        多个子盒子:    对一个父盒子里设置多个子盒子(对子元素进性浮动),这些子元素不会超出父盒子的宽度,而是会换行显示。

   

换行显示

        单个子盒子:无论标准流和浮动流,可以超出父盒子范围。

网页布局中:

使用父盒子进行占位(标准流的上下布局),父盒子里的子盒子进行浮动定位(盒子里的左右布局),父盒子的占位需要设置自身的宽和高。



以下展示下今天的案例吧。

案例一,采用浮动进行布局。分为:整体大盒子,里左侧一个盒子,右侧一个盒子,右侧里上一个,下一个,下一个里有四个盒子。


浮动布局1

案例2,外整大盒子,里分为左,中,右进行布局。

浮动布局2

案例3,这个案例运用内外边距做,分为上下模块,上可利用标题,下可利用列表做。

内外边距案例

好了,今天就到这里吧,明天休息一天,也得预习和复习,后天的话也是自习。

晚安。

对了,做前段开发的话,测量也是必须的,感觉很麻烦的就是测量了。放一张测量图吧。


案例2测量图

这个测量的也很麻烦,写模块的话,也就是从大到小,层层递进,前端感觉都是一个盒子套一个盒子,有思路后就清晰很多。

晚安。尼古拉丝。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 11,444评论 2 66
  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    从小就好看阅读 1,760评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    前端陈陈陈阅读 2,187评论 0 1
  • 1. CSS初识 用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)...
    Scincyc阅读 2,532评论 0 0

友情链接更多精彩内容