前端基础（8）：PC端宽高自适应_pc端前端宽度自适应-程序员宅基地
技术标签： css html5 js html javascript
一、PC自适应的概念
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口自动调整或者根据子元素自动调整，这就是pc自适应。
自适应的优点：
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和 不同分辨率下显示。
1、宽、高的自适应实现
1）.元素宽度自适应
元素宽度设置为100%。（块元素宽度默认为100%）
或者不设置宽度（width）;（宽度是父元素的宽度）
2.高度自适应
height:auto;或者不设置;（是子元素撑开父元素的高度）1）最小高度的应用
min-height
2）元素高度自适应窗口高度
设置元素高度为100%；需添加html,body{height:100%;}
注：如果设置子元素的高度跟随父元素的高度变化而变化，那么父元素必须有高度。）
二、高度塌陷
浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）
hack1：给父元素添加声明overflow:hidden;
hack2:在浮动元素下方添加空div,并给该元素添加声明：clear:both;height:0;overflow:hidden;
hack3:万能清除浮动法选择符:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
visibility:hidden/visible;隐藏/可见
visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域
而 display:none属性会使这个对象彻底消失。
三、伪对象选择符(伪元素选择符)
1）、:after:与content属性一起使用，定义在对象后的内容。 如：div:after{content:url(logo.jpg);} div:after{content:“文本内容”;}
2）、:before:与content属性一起使用，定义在对象前的内容。 如：div:before{content:“在其前放内容”;}
3）、:first-letter:定义对象内第一个字符的样式。
4）、:first-line:定义对象内第一行的样式。
说明：*(该伪元素只能用于块级元素。)*ie6以下版本浏览器不支持伪对象选择符。
元素大小适应子元素大小
min-height（最小高度）
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)
注：IE6及以下版本不识别该组属性。
hack1:min-height:value; _height:value;
hack2:min-height:value; height:auto!important; height:value;(建议使用)
注：height属性在IE6里就类似min-height作用。
圣杯布局
双飞翼布局
在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局 。
智能推荐
基于内核4.19版本的XFRM框架_linux的xfrm框架-程序员宅基地
文章浏览阅读794次，点赞2次，收藏5次。XFRM框架_linux的xfrm框架
织梦常用标签整理_织梦中什么页面用什么标签教学-程序员宅基地
文章浏览阅读774次。DedeCMS常用标签讲解笔记整理 今天我们主要将模板相关内容，在前面的几节课中已经基本介绍过模板标签的相关内容，大家可以下载天工开物老师的讲课记录：http://bbs.dedecms.com/132951.html,这次课程我们主要讲解模板具体的标签使用，并且结合一些实例来介绍这些标签。 先前课程介绍了，网站的模板就如同一件衣服，衣服的好坏直接决定了网站的好坏，很多网站一看界面_织梦中什么页面用什么标签教学
工作中如何编译开源工具（gdb）_gdb编译-程序员宅基地
文章浏览阅读2.5k次，点赞2次，收藏15次。编译是大部分工程师的烦恼，大家普遍喜欢去写业务代码。但我觉得基本的编译流程，我们还是需要掌握的，希望遇到相关问题，不要退缩，尝试去解决。天下文章一大抄，百度能解决我们90%的问题。_gdb编译
python简易爬虫v1.0-程序员宅基地
文章浏览阅读1.8k次，点赞4次，收藏6次。python简易爬虫v1.0作者：William Ma (the_CoderWM)进阶python的首秀，大部分童鞋肯定是做个简单的爬虫吧，众所周知，爬虫需要各种各样的第三方库，例如scrapy, bs4, requests, urllib3等等。此处，我们先从最简单的爬虫开始。首先，我们需要安装两个第三方库：requests和bs4。在cmd中输入以下代码：pip install requestspip install bs4等安装成功后，就可以进入pycharm来写爬虫了。爬
安装flask后vim出现：error detected while processing /home/zww/.vim/ftplugin/python/pyflakes.vim:line 28_freetorn.vim-程序员宅基地
文章浏览阅读2.6k次。解决方法：解决方法可以去github重新下载一个pyflakes.vim。执行如下命令git clone --recursive git://github.com/kevinw/pyflakes-vim.git然后进入git克降目录，./pyflakes-vim/ftplugin,通过如下命令将python目录下的所有文件复制到~/.vim/ftplugin目录下即可。cp -R ...._freetorn.vim
HIT CSAPP大作业：程序人生—Hello‘s P2P-程序员宅基地
文章浏览阅读210次，点赞7次，收藏3次。本文简述了hello.c源程序的预处理、编译、汇编、链接和运行的主要过程，以及hello程序的进程管理、存储管理与I/O管理，通过hello.c这一程序周期的描述，对程序的编译、加载、运行有了初步的了解。_hit csapp
随便推点
挑战安卓和iOS！刚刚，华为官宣鸿蒙手机版，P40搭载演示曝光！高管现场表态：我们准备好了...-程序员宅基地
文章浏览阅读472次。点击上方 "程序员小乐"关注,星标或置顶一起成长后台回复“大礼包”有惊喜礼包！关注订阅号「程序员小乐」，收看更多精彩内容每日英文Sometimes you play a..._挑战安卓和ios!华为官宣鸿蒙手机版,p40搭载演示曝光!高管表态:我们准备好了
精选了20个Python实战项目(附源码)，拿走就用！-程序员宅基地
文章浏览阅读3.8w次，点赞107次，收藏993次。点击上方“Python爬虫与数据挖掘”，进行关注回复“书籍”即可获赠Python从入门到进阶共10本电子书今日鸡汤昔闻洞庭水，今上岳阳楼。大家好，我是小F。Python是目前最好的编程语言之一。由于其可读性和对初学者的友好性，已被广泛使用。那么要想学会并掌握Python，可以实战的练习项目是必不可少的。接下来，我将给大家介绍20个非常实用的Python项目，帮助大家更好的..._python项目
android在线图标生成工具,图标在线生成工具Android Asset Studio的使用-程序员宅基地
文章浏览阅读1.3k次。在网站的导航资源里看到了一个非常好用的东西：Android Asset Studio，可以在线生成各种图标。之前一直在用一个叫做Android Icon Creator的插件，可以直接在Android Studio的插件里搜索，这个工具的优点是可以生成适应各种分辨率的一套图标，有好几种风格的图标资源，遗憾的是虽然有很多套图标风格，毕竟是有限的。Android Asset Studio可以自己选择其..._在线 android 图标
android 无限轮播的广告位_轮播广告位-程序员宅基地
文章浏览阅读514次。无限轮播广告位没有录屏，将就将就着看，效果就是这样主要代码KsBanner.java/** * 广告位 * * Created by on 2016/12/20. */public class KsBanner extends FrameLayout implements ViewPager.OnPageChangeListener { private List
echart省会流向图（物流运输、地图）_java+echart地图+物流跟踪-程序员宅基地
文章浏览阅读2.2k次，点赞2次，收藏6次。继续上次的echart博客，由于省会流向图是从echart画廊中直接取来的。所以直接上代码<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&_java+echart地图+物流跟踪
Ceph源码解析：读写流程_ceph 发送数据到其他副本的源码-程序员宅基地
文章浏览阅读1.4k次。一、OSD模块简介1.1 消息封装：在OSD上发送和接收信息。cluster_messenger -与其它OSDs和monitors沟通client_messenger －与客户端沟通1.2 消息调度：Dispatcher类，主要负责消息分类1.3 工作队列：1.3.1 OpWQ: 处理ops（从客户端）和sub ops（从其他的OSD）。运行在op_tp线程池。1...._ceph 发送数据到其他副本的源码