黑马程序员技术交流社区

标题: 对学习前端的一些想法 [打印本页]

---

作者: zfy1992    时间: 2019-10-13 12:47
标题: 对学习前端的一些想法
Html和css，这2个是非常基础的知识点，但是一定要学习扎实，对后期学习js有较大的帮助。
        布局方面，拿到设计师的ps源文件或者设计稿图片，先要建好项目文件夹（js、fonts、img、upload、css），在把初始化bass.css放到css文件，再创建index.html。开始书写前，一定要先分析设计稿，确定版心，然后划分区域，从左往右去写样式，需要设置宽高的都去设置，这样可以有效防止出错，写完结构再去写结构的样式，写css和html的时候一定要注意去备注，命名也要规范，书写顺序要对，方便自己查错和后面接手的人可以清晰你的代码。下面是结合老师的讲解自己对css和html的一些看法：
        静态页布局基本上用到的大部分属性是
1.        实体化三要素：宽width ，高 height , 背景 background 。
2.        文字属性：font-size、font-weight、color、lin-height、text-align、text-decoration等
3.        盒子模型：外边距margin (注意塌陷问题，浮动，定位以及overflow:hidden等可以解决这个问题)、内边距 padding （注意有宽高要减值）
4.        浮动：2种布局方式：左中右，左右布局，工作中大部分涉及这些，注意有些情况下要清除浮动不然影响后面布局。
5.        定位：相对定位、绝对定位(需要父盒子也有定位)、固定定位。
6.        盒子显示的模式：块元素、行内块、行内，要会转化： display。要知道他们的特性。
对垂直居中和水平居中的一些看法：
水平居中：
text-align: center 只对行内元素和行内块元素及盒子里面的文字内容，给父级加可以继承给子盒子里面的内容。
Margin: 0 auto; 只能让有固定宽度的块级元素水平居中；
垂直居中：
vertical-align: middle;通常让图表或图片和文字垂直居中;还能去除图片留白问题，针对行内元素和行内块元素

line-height: 高度：只能让单行文本垂直居中；针对行内元素和行内块元素

以上是我的一些学习的经验，有不足之处希望提出来

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2