Часть 1 CSS связана
1 Каковы элементы встроенных элементов и блокировки?
Общие встроенные элементы (встроенные элементы) включают A, B, Span, I, EM, вход, Select, IMG и т. Д.
Общие элементы блока включают Div, UL, LI, H1 ~ H6, Talbe, OL, UL, TD, P и т. Д.
2 Связанный с плавающей запчасти
Плавающая компоновка относится к удалению элемента из обычного потока потока/документа, чтобы он мог перемещаться влево и вправо, пока его внешний край не встретит край, содержащий коробку или другую плавающую коробку. Плавающая коробка не принадлежит нормальному потоку в документе. Когда элемент плавает, он не повлияет на расположение элементов на уровне блока, а только повлияет на расположение встроенных элементов.
Именно потому, что плавающий элемент отделен от потока документа, его родительский элемент не знает своего существования, поэтому он будет вести себя как высота 0. Независимо от того, как изменяется плавающий элемент, его родительский элемент не будет его обернуть. Это явление также называется «коллапс высоты».
В следующем примере, независимо от того, как изменяется высота #floatdom, высота #parent всегда 0, что приведет к тому, что родительская граница не может быть растянута открытой, фон не может быть отображен и т. Д.
<div id = "parent"> <div id = "floatdom" style = "float: слева;
Из -за существования сильно разрушенных (что часто не то, что мы ожидаем), плавание должно быть очищено. Вот несколько способов очистить плавание:
• Добавить элементы с стилем «чисто: оба» после плавучих элементов
<div id = "parent"> <div id = "floatdom" style = "float: слева;
Вы также можете добавить теги BR, которые поставляются с ясным: оба атрибута
<div id = "parent"> <div id = "floatdom" style = "float: left; ширина: 300px; высота: 300px;"> <br/> </div>
Преимущества использования этого метода для очистки плавания состоит в том, что его легко понять, легко освоить, а недостатки также очевидны. Добавлено много бессмысленных этикетков, что очень болезненно в последующем поддержании.
• Добавить стиль «переполнение: скрыто» к родительскому элементу
<div id = "parent" style = "overflow: hidden"> <div id = "floatdom" style = "float: left; ширина: 300px; высота: 300px;"> </div>
Таким образом, нет структурных и семантических проблем, и количество кода очень мало. Однако, когда контент увеличивается, контент не будет автоматически обернут, а контент будет скрыт, а элементы, которые необходимо переполнены, не могут быть отображены.
• Использование: после псевдоэлемента
<style type = "text/css"> .clearfix: после {content: "."; дисплей: блок; высота: 0; видимость: скрыта; ясно: оба; } .clearfix { *Zoom: 1; } </style> <div id = "parent"> <div id = "floatdom" style = "float: left; ширина: 300px; высота: 300px;"> </div>Используя этот метод, вам нужно только добавить класс в целевой элемент, который также является наиболее часто используемым методом в настоящее время.
Ссылка
iyunlu.com/view/css-xht
3. Разница между относительной компоновкой и абсолютной планировкой
Наиболее важное различие между относительной компоновкой и абсолютной планировкой состоит в том, отделяется ли он от потока документов.
Относительная планировка не отделена от потока документов, то есть после установки относительной компоновки элемента, поток документа все еще сохраняет свое исходное положение. Установив свойства, такие как верх и слева, он может установить смещение относительно исходной позиции.
Абсолютный макет отделен от потока документов, то есть элементы в потоке документов не знают существования абсолютного элемента макета. Позиционирование абсолютного макета относительно элементов с относительной компоновкой или абсолютной планировкой в родительском элементе. Если нет, это относится к компоновке тела.
4 модель коробки
Модель ящика определяет форму отображения элемента, включая контент (содержимое), прокладку (внутренний край), границу (граница) и поля (внешний край). В настоящее время существует два стандарта модели коробки, один из них - модель стандартной коробки W3C, а другая - модель IE Box, которая принимает собственные стандарты Microsoft.
Разница между этими двумя моделями коробки в основном в расчете ширины элемента. Ширина, определенная в CSS в стандартном режиме, представляет собой ширину содержания, ширина, занятая всем элементом на странице, и формула расчета:
Кода -копия выглядит следующим образом:
Dom_width = ширина + накладка + граница + маржа
В модели ящика IE ширина, определенная в CSS, - это содержимое + падки + граница. Следовательно, в модели ящика IE ширина, занятая всем элементом на странице (такая же, как высота)
Кода -копия выглядит следующим образом:
Dom_width = ширина + маржа
В CSS3 две модели коробки сохраняются с использованием box-sizing . Когда мы устанавливаем box-sizing: content-box (по умолчанию), мы принимаем модель стандартной коробки W3C. Когда мы устанавливаем box-sizing:border-box , мы используем модель IE Box.
5 CSS сброс (сброс)
У каждого браузера есть некоторые стили, которые поставляются с ним, и в каждом браузере часто различаются стили, что доставляет некоторые неудобства для нашего макета. Следовательно, на практике часто необходимо «очистить» стиль CSS браузера, то есть CSS -сброс. Самый простой код сброса заключается в следующем:
*{маржа: 0; Надо: 0;}Хотя этот метод прост, он слишком «жестокий», потому что многие элементы, такие как Div и Li, не имеют маржи или стилей прокладки по умолчанию, что равносильно причинению большого количества избыточности. Более рекомендуемый способ написать код сброса в соответствии с вашими потребностями.
Ссылка:
www.zhangxinxu.com/wordpress/2010/08/html5-css-reset
6 CSS Hack
Поскольку разные браузеры имеют различный анализ и поддержку CSS, это приведет к отображению одного и того же кода CSS в разных браузерах. Это требует, чтобы CSS взломал для решения проблемы совместимости различных браузеров. Этот процесс написания разных стилей для разных браузеров называется CSS Hack.
Есть несколько общих форм взлома CSS:
• Hack Properties
Например, IE6 может распознавать _width и *width , но в IE7 может распознать *width , но не может распознать _width , ни один из них не распознается в Firefox.
• Выберите Hack Hack
Например, IE6 может распознавать *html .class{} , и IE7 могут распознавать *+html .class{} или *:first-child+html .class{} .
• Условия взлома
IE Conditental Annotation-это нестандартный логический заявление, предоставленное Microsoft со времен IE5. Например, для всех IES:
<! [IE IE]> <! Ваш код> <! [Endif]>
Для IE6 и ниже:
<! [Если LT IE 7]> <! Ваш код> <! [endif]>
Этот тип взлома не только вступает в силу на CSS, но и вступает в силу ко всем кодам, написанным в высказываниях.
Ссылка
//www.vevb.com/css/226888.html
7 изящная деградация и прогрессивное улучшение
Прогрессивное улучшение относится к страницам здания для браузеров с низкой версией для обеспечения самых основных функций, а затем для улучшения эффектов, взаимодействий и других улучшений и дополнительных функций для продвинутых браузеров для достижения лучшего пользовательского опыта.
Элегантное понижение относится к созданию полной функциональности с самого начала, а затем совместимо с браузерами с более низкими версиями.
Разница между ними заключается в том, что элегантные понижения начинаются со сложного статус -кво и попытка уменьшить поставку пользовательского опыта, в то время как постепенное улучшение начинается с очень базовой функциональной версии и постоянно расширяется для удовлетворения потребностей будущих сред. Деградация (функциональный распад) означает оглядываться назад; В то время как постепенное улучшение означает, что можно с нетерпением ждать, обеспечивая, чтобы его основание находилось в безопасной зоне.
8 Расскажите нам о проблемах совместимости браузера
• Внутренняя маржа и внешняя маржа, отображаемая в разных браузерах, разные. Например, тег UL имеет значение для заполнения в Firefox по умолчанию, в то время как в IE только Margin имеет значение.
Использование CSS Reset (см. Статью 5)
• Ошибка двойного края IE6, маржа первоначально 10PX после плавания элемента уровня блока, но IE интерпретирует его как 20px.
Установите дисплей элемента на уровне блока в Inline
• Min-Height не поддерживается в IE6
Функция MIN-высота состоит в том, чтобы поддерживать минимальную высоту, когда в контейнере меньше контента, чтобы не разрушать макет или эффект дизайна пользовательского интерфейса. Когда контент в контейнере увеличивается, контейнер может автоматически растягиваться, чтобы адаптироваться к изменениям в содержании.
Это может быть решено:
#TargetDom {founale: #CCC; Мин-высот: 100px; Высота: Авто! Важно; высота: 100px; переполнение: видимо; }• Метод функция событий связывания в стандартном связывании событий является AddEventListener, в то время как IE использует AttedEvent
Посредством условного суждения напишите два заявления об обязательстве или используйте библиотеки веб -структуры, такие как JQUERY для привязки.
• Стандартные браузеры применяют захват событий, в то время как IE принимает пузырьный механизм событий
Позже, стандарт полагал, что пузырь был более разумным, и использовал третий параметр, чтобы установить AddEventListener для совместимости с двумя механизмами, а пузырь событий был значением по умолчанию.
• Атрибут события в обработке событий отличается от атмосфера в стандартных браузерах.
Стандартный браузер вводится в качестве параметра, а IE получается в Window.Event. Целевым элементом является E.srcelement. Стандартный браузер E.Target.
Часть 2 другого
1 Понимание общеиспользуемых кодов статуса HTTP
200 ОК, все в порядке, документ ответа на запросы get and post следует.
201 Созданный сервер создал документ, а заголовок местоположения дает свой URL.
202 Принято, что запрос был принят, но обработка не была завершена.
304 Не изменен. Клиент имеет буферизованные документы и выдает условный запрос (обычно предоставляя заголовок IF-модифицированного и звена, который указывает на то, что клиент хочет обновить только документы, чем указанная дата). Сервер сообщает клиенту, что оригинальный буферный документ может продолжать использоваться.
400 Ошибка синтаксиса произошла в запросе плохого запроса.
404 не найдено, что ресурс в указанном месте не может быть найден. Это также обычно используемый ответ.
405 Метод не разрешен метод запроса (Get, Post, Head, Delete, Pult, Trace и т. Д.) Не применим к указанному ресурсу. (Новое для http 1.1)
500 Ошибка внутреннего сервера Сервер столкнулся с неожиданной ситуацией и не смог заполнить запрос клиента.
502 Когда сервер Bad Gateway действует как шлюз или прокси, чтобы завершить запрос на доступ к следующему серверу, сервер возвращает незаконное ответ.
2 рукописный запрос Ajax
// Маскет метод xmlhttprequest в IE5 и IE6 if (window.xmlhttprequest === undefined) {window.xmlhttprequest = function () {try rate new ActiveXobject ("msxml2.xmlhttp.6.0"); // Доступно, используйте новейший объект ActiveX} catch (e1) {try {return new activexObject ("msxml2.xmlhttp.3.0"); // Невозможно, отключить более раннюю версию} catch (e2) {бросить новую ошибку ("xmlhttprequest не поддерживается"); }}}}}} // get function function xhrget (url, callback) {var equest = new xmlhttprequest (); request.open ('get', url, true); request.onreadyStateChange = function () {if (request.readystate === 4 && request.status == 200) {callback && callback (request.responsetext); }}; request.send (null);} // post function function xhrpost (url, data, callback) {var equest = new xmlhttprequest (); request.open ('post', url, true); request.setrequestheader ('content-type', 'application/json'); request.onreadystatechange = function () {if (request.readystate === 4 && request.status == 200) {callback && callback (request); }}; request.send (json.stringfy (data));}Это традиционное использование Xmlhttprequest. Xmlhttprequest level 2 предлагает много новых методов, и CORs, которые мы часто упоминаем, также из этого метода.
Чтобы узнать больше о xhr2 Рекомендуемое xmlhttprequest level 2 Руководство пользователя
3 проблемы с доменом
Когда мы запрашиваем данные у других серверов через Ajax на странице, у клиента будут проблемы с междоменом из-за гомологичной политики браузера для JavaScript. Так называемая политика одинакового происхождения относится к сценарию, который может запрашивать ресурсы только из того же источника (то же самое доменное имя, номер порта, протокол).
Если адрес службы, запрашиваемый Xmlhttprequest выше, отличается от текущего файла, в браузере появится следующая ошибка:
Итак, как решить эту проблему по перекрестной области?
(1) Используйте Cors для перекрестного домена
"Обмен ресурсами перекрестного происхождения, CORS для короткого). CORS-это возможность расширить в XHR2. Метод использования очень прост. Установите его на стороне сервера:
Заголовок SET-CONTROL-ALLOAD-ORIGIN *
В этом параметре будут приняты перекрестные запросы на все доменные имена, вы также можете указать конкретные URL-адреса, или вы также можете ограничить доменное имя:
Заголовок Set Access-control-llow-Origin http://www.test.com
Тем не менее, ограничение этого подхода заключается в том, что он требует от клиента поддержать его и сервер для выполнения соответствующих настроек. Когда оба удовлетворены, перекрестный домен через COR не только поддерживает все типы HTTP-запросов, но и разработчики могут использовать обычные xmlhttprequest для инициирования запросов и получения данных, которые имеют лучшую обработку ошибок, чем JSONP.
(2) Используйте JSONP для достижения перепрыгивания
Для более старых браузеров они, как правило, не поддерживают COR, поэтому использование JSONP для междомена также является общим способом использования JSONP.
Мы знаем, что при загрузке целевых сценариев с помощью спецификации SRC элемента <cript> на веб-странице это не влияет на политику одинакового происхождения, поэтому их можно использовать для запроса данных с других серверов. Эта технология, которая использует элементы <script> как передача Ajax, называется JSONP.
Принцип реализации JSONP заключается в следующем:
function getJsonp (url, обратный вызов) {var funcName = getUniquename (); // Используйте временные метки или обратитесь к счетчику автоматического интеграмента, чтобы получить уникальное имя функции url + = "? Callback =" + funcName; // Добавить имя функции в качестве параметра в url var script = document.createElement ('script'); // Динамические теги сценария построения // Функция обратного вызова getJsonp [funcName] = function (response) {try {callback (response); // Данные ответа процесса} Наконец {// Даже если функция обратного вызова или ответ бросает ошибку, очистите динамически добавленное содержимое удаление getJsonp [funcname]; script.parentnode.removechild (scipt); }} // триггер http -запрос script.src = url; document.body.appendchild (script); }У JSONP также есть некоторые недостатки. Прежде всего, JSONP поддерживает GET, но не поддерживает метод POST. Кроме того, запросы AJAX используются с использованием элементов <Script>, что означает, что веб -страница может выполнять любой код JavaScript, отправленный удаленным сервером. Поэтому эта технология не должна использоваться для серверов, которые не доверяют.
(3) Используйте window.name для перекрестного домена
У окна объект имеет атрибут имени, который имеет функцию: то есть в течение жизненного цикла окна, все страницы, загруженные окном, обмениваются окном. window.name сохраняется на всех страницах, загруженных окном, и не будет сброшено из -за загрузки новой страницы. Следовательно, данные могут быть переданы на страницах из разных источников с Window.name.
Если www.a.com/a.html хочет получить данные на www.b.com/b.html, принцип заключается в следующем:
а) хранить данные в Window.name в B.HTML
б) Создайте скрытую (дисплей: нет) IFRAME TAG в A.HTML, предполагая, что идентификатор установлен на прокси и SRC установлен на то же происхождение, что и A.HTML.
C) Получить данные в A.HTML через следующий код
var proxy = document.getElementbyId ('proxy'); proxy.onload = function () {var data = proxy.contentwindow.name; // Получить данные}г) удалить связанные элементы
(4) Используйте Window.postmessage для перекрестного домена
Этот метод относительно прост. На странице A используйте windowobj.postmessage (сообщение, Targetorigin), чтобы отправить информацию на целевую страницу, а на странице B информация получается при прослушивании событий сообщений. Этот метод является новым методом в HTML5 и не может использоваться для старых браузеров, таких как IE6 и IE7.
4 Как повысить производительность веб -сайта
Пожалуйста, обратитесь к двум другим статьям блоггера:
Некоторые предложения по улучшению производительности веб -сайта
Некоторые предложения по улучшению производительности веб -сайта 2
Новый контент будет постоянно обновляться ...
Автор блога: Vicfeel