发表于： 2019-11-02 21:54:53
1 958
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
总结今天学习，看完深度思考了解任务4
<label for>for 属性规定 label 绑定的表单元素 可以点击空白来输入，这个难住了一会，终于解决
代码
<label for="male">啦啦啦</label>
<input type="text" name="sex" id="male" value="male">
此代码研究许久， 通过在下代码添加 id="male" 绑定表单元素
<input type="text" id="male" class="zh" placeholder="请输入用户名" >
在<div>外加<label for="male"><label>实现目标
代码如下
<label for="male"><div class="box3"><img src="./img/W.png" alt="锁图标" width="15px" height="22px">
<img src="./img/T.png" alt="竖线" width="1px" height="26px"><input type="password" id="male" class="for" placeholder="请输入密码"></div></label>
输入 margin0； 按F12查看会出现距离顶部有些许空白
如图
可以通过下列代码实现，
一般A链接作用到网页会给文字加上颜色和下划线 通过下列代码可实现无下划线和字体白色
此代码是按钮代码，一般使用代码会有背景颜色和边框，可以通过代码实现去除边框和去除背景颜色，字体颜色为白色，字体大小17px
下面代码设置了输入框的高和宽，通过left和top调动位置 border：none；outline：none；清处文本框格式 显示为下图
今天尝试了在标签内添加style样式，效果也挺好
定位属性也用了，但是认知还是模糊，明天补充相关知识
明天计划的事情：（一定要写非常细致的内容）
学习定位相关知识，看些基础文章，用定位重写任务4
布局表单包含input和button 查看<form>标签的使用性，什么情况下使用，什么情况可以不用
遇到的问题：（遇到什么困难，怎么解决的）
对定位理解模糊，加强学习基础知识
收获：（通过今天的学习，学到了什么知识）
HTML文件里开头的Doctype有什么作用
它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。
如何理解盒模型及其content、padding、border、margin？
盒模型由content、padding、border、margin四部分组成
content为网页显示内容，通过padding设置和边框的距离，可设置上下左右，border外为margin，margin设置和网页的距离，可设置上下左右
所以盒模型的宽度应该content+左右padding+左右border+左右margin=盒模型宽度
高度为content+上下padding+上下border+上下margin=盒模型的高度
常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？
常用的inline元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变
内连元素可以通过设置display:block将元素显示为块级元素。
常用的block元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
块状元素单独占一行，想在同一行可以通过左右浮动解决，块状元素可以通过代码display:inline将元素设置为内联元素
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
常用的inline-block元素有：
<img>、<input>
display:inline-block是将元素设置为内联块状元素。
和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置。
如何使用浏览器的F12调试页面？
可在网页上随意点开某一个块级元素进行审查，在管理者工具栏有一个直观的盒子样式，可以直接在盒子上进行更改.margin，填充，边框，内容栏的上下左右各个值都可以进行直观的修改。
加和不加meta的viewport有什么区别？
代码 <meta name="viewport" content="width=device-width, initial-scale=1.0">
不声明视口宽度时，浏览器会使用默认的布局视口作为页面宽度
——————————————————————————————————————————————————————
如何利用PS切图以及从UI图中获取所需信息？
打开PS 选中所需图片 Ctrl+鼠标左键即可查看图片大小，基本信息可以在图层里看到
px、em、rem、%、vw、wh、vm等单位有什么区别？
px是像素
1em默认为12px
rem是全部的长度都相对于根元素，根元素<html>。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
%百分比单位
vw相对于视口的宽度
vh 相对于视口的高度
vmax/vmin相对于视口的宽度或高度中较小的那个。
如何进行自适应网页设计？
在HTML头部增加viewport标签
不使用绝对宽度
流动布局
流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
MediaQuery模块
"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载a.css文件。
link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="b.css"
如果屏幕宽度在400像素到600像素之间，则加载b.css文件。
css有哪些选择器，优先级如何计算？
CSS的选择器分为两大类：基本选择题和扩展选择器
css选泽规则的权值不同时，权值高的优先；
css选择规则的权值相同时，后定义的规则优先；
从而确定 定义样式规则的 优先级次序；
什么时候用margin好，什么时候用padding好？
内容与边框之间用 padding 边框和父元素之间用margin
手机分辨率和网页中的px是一回事吗
分辨率是单位长度内包含像素点的数量，通常以像素每英寸ppi（pixel per inch）为单位来表示图像分辨率的大小，例如分辨率为72ppi表示每英寸包含72个像素点，分辨率越高，包含的像素点就越多，图像越清晰，但占用的存储空间就越大。
分辨率分为屏幕分辨率和图像分辨率，例如：屏幕分辨率是1280*720，就是屏幕的水平方向上有1280个像素点，垂直方向上有720个像素点；一张图片分辨率是800*500，就是说图片在没有缩放的前提下，水平方向上有800个像素点，垂直方向上有500个像素点。
像素单位的分类
手机上的像素叫设备像素，也叫物理像素，顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来的那天起，它上面的物理像素点就固定不变了。
物理像素是指设备屏幕实际拥有的像素点，比如iPhone6 的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone6总共有750*1334个物理像素
返回列表
评论