CSS基础（2）

最新推荐文章于 2022-11-30 21:37:28 发布

信睚

最新推荐文章于 2022-11-30 21:37:28 发布

阅读量71

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/sinat_33828130/article/details/97413319

版权

10 篇文章 0 订阅

订阅专栏

响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。

响应式布局中的字体大小
px为像素，是相对于显示器屏幕分辨率而言的长度单位

em，是相对于父级元素而言的长度单位，em与px的换算与父元素有关
当父元素字体大小为16px时，则当前元素中1em=16px，2em=24px……
当父元素字体大小为12px时，则当前元素中1em=12px，2em=24px……

rem，是css3中新增的单位，是相对与根元素而言的长度单位

rem与em的区别在于，em随父元素变化，在一个css文件中往往有多个不同的元素可作为父元素，存在多种变换关系；而rem只跟随根元素，只需修改根元素大小就可以等比例的缩放所有字体。
参考：响应式Web 设计—px-em-rem三者区别及rem的使用

CSS中的元素布局是标准流的形式
块级元素占据一整行，并且自上而下排列，即使上下两个元素宽度和小于屏幕宽度，下方元素也会自动纵向排列。
当布局时想要两个元素横向排列就需要通过浮动实现

float：left/right/none

float：left/right可理解为对元素下指令，向左/右看齐！
float：none不浮动

下面这篇文章给出了非常详尽的说明
CSS——样式（浮动）

段落对齐方式：
text-align：left（左对齐）
text-align：right（右对齐）
text-align：center（居中对齐）
text-align：justify（两端对齐）
行高：
line-height：设置值 （设置行高）

行高指的是段落中每一行文字所占据的高度，其与文字大小有着本质的区别。设置了行高之后，行内的文字会在行内垂直居中对齐（父容器不小于行高），这是网页布局中常用的一种对齐方式。
参考：css中的段落样式及背景

外联样式：

   <style>
    .logo img{
        width:150px;
   </style>
   <body>
       <div class="logo"><img src="task3_07.png"></div>
   </body>

内联样式

   <body>
       <div class="logo"><img src="task3_07.png" style=”width:150px“></div>
   </body>

关注